STARTING OUT WITH ANGULAR

 Let's will start with 
What is Angular
Angular is a javascript framework based on which is based on typescript which is a subset of Javascript and HTML.
It's also described as a component-based framework that uses typescript and HTML to build client-side single-page application "SPA".
Why Angular?

• Angular is owned by Google which means frequent updates because a lot of software engineers are consistently researching and improving on it. 

• It's best to build enterprise applications.

• It allows you to build a particular aspect of the application
  being built without having to build the entire application.

• It supports MVC and SPA which means Mobile Version Control and Single Page Application.

• It allows testing and building at same in the same environment.

• STRUCTURE OF ANGULAR **

• The angular structure contains modules and components. These components each contain a typescript that can be recognized by "ts " and an HTML file. 

• The typescript file contains the logic and functional operations while the template or HTML file contains what is rendered on the browser.

• Angular contains a root module where all component interactions start from.

• Angular is structured in such a manner that different components interact with each other. 

• With the new angular 14 updates where standalone components have been added as one of the new features here, the standalone component acts like its own module. 

• In angular components can be structured so that each component performs a specific function.

• One of the main benefits of the structure in angular is that it allows reusability of various functions in different components in different modules.

What Are The Main Concepts Of Angular

1.Component: This s the basic structural unit of how an angular application is based. Components hold specific functions, you may decide to create a component to handle just your Navbar in which you write a function specifically, just for the Navbar and you create another component to handle a specific page which will display on your application.

 You can generate this component by simply typing this command in your Vs code terminal. 

ng generate component componentName

This part that shows componentName represents the component's name and you may decide to give any name of your choice.
2. Component Interaction: This concept can be explained from the name it is simply how components communicate. If you want to communicate from a parent component to a child component where you pass data from parent to child you use the @Input decorator, while if you choose to pass data from child to parent you use the @Output decorator where you use an EventEmitter to capture the event.
NB: Decorators are design patterns or functions that describe how angular features work. They make modifications to a class or service.

3. Pipes: These are simple functions that you can use in the template expression to accept an input value and return a transformed value.
Pipes are useful because you can use them throughout your application, while you only declare each pipe once.
you can use a pipe to transform currency, date, string amount, etc.
you can see an example below where a date is changed from a raw string to January 26th, 1997

{{ 26/01/1997 | date: 'dd/MM/yyyy'}}

this symbol " |" represents a pipe anywhere it's used in angular.
4.Directives:These are classes that add additional behavior to your elements in your angular application.
You can use angular built-in directives to manage forms, lists, styles, and what your user sees.
The types of directives include: 

• Component directives: You can use these directives can be used in the template. 

• Attributes directives: You can use these to change the appearance or behavior of an element, component, or another directive. 

• Structural directives: You can use these to change the DOM layout by adding and removing elements.

TYPES OF BUILT-IN ATTRIBUTE DIRECTIVES

• NgClass 
• NgStyle 
• NgModel

TYPES OF BUILT-IN STRUCTURAL DIRECTIVES 
 All the structural directives are written with an * in front of them

• NgIf which you as an if statement in angular.

• NgFor which you use to loop conditions in angular.

• NgSwitch which allows you to display one or more DOM elements depending on the condition you set.
  5. ROUTING: This simply can be described as how you navigate from one part of the page to the other. You can move from the home page to log in and back and forth that's the function of routing. 
  You start with adding the router-outlet which is a router functionality that you use to insert the exact component that matches the route you are trying to implement.
  Two components of routing you need to know are: 
   The path that's where you are navigating to which you can always add with a 

path: '',

The Component which you can use to specify the component to be rendered or displayed.

component: ComponentName,

6. Services: Let's use a real-life scenario to explain this if you want to use a data plan you need a data subscription, that data subscription is a service that allows you to access the internet. 
So services in angular are no different they allow you to access API endpoints and ensure that the component doesn't become encumbered with too many functionalities. To use your service first you have to create a service using the following command

ng generate service ComponentName/ComponentName

Now you use dependency injection to inject your service into the constructor. Let's say you name your component photos and you created a service for photos, to use that service you would have to do the following.

ng generate service photos/photos

that's to create the component, then for you to use dependency injection in the constructor, you inject the service you have created by doing this

constructor(private photoservice: Photoservice) {}

above is called Dependency Injection.
7. Modules: Using a real-life context modules are like containers that contain components, pipes, services, and every other part of part related to the angular application. every component created would be part of the NgModule array that encompasses the imports and various declarations.
a module can be created with the following command.

ng generate module moduleName

NB: you can only have one root module that all other modules would be linked to.
That's it for now happy coding