Angular what i know:

We can create the project by this command: ng new learning-app --no-standalone

If we create project like this then we can have app.module.ts file on our project.

When we work with angular we work with three types of environment. One is node, another one is typescript and other one is angular itself. So all three will have json file in the angular app project. 

dependency in package.json: whatever file we need to create an angular application. On the other hand the devDependency is whatever we need to use in the production phase.

We can use npm that is node package manager and we can install whatever package we need to add on our project that will be in the package.json file.

On angular.json: we have all the projects info and the tools we need to work on the project we just add those inside this file.

Whenever we say the app is render it is html, when we say app is running it is typescript.

Inside the main.ts file: we can find the bootstrapmodue, 

bootraping is running first, it helps running the app-component.

Main.ts file runs first and Index.html renders first. If we want some component specific styling then we use the app.componet.css but if we want the global styling then we use the styles.css file for styling.

Fun:

app.component.ts has the ts code that we can make export class and on there we can use objects, we can use those objects on the template(html) file: app.component.html. We can directly use those object on the template file.  On app.componet.ts file has to have a @componet decoretor and import it before using it. It has a configuration object inside: selector, templateUrl and styleUrl. Then it export the typescript class. The way component decoretor works is it will first check the selector from css and then it will locate to the html. 

How angular works:

First it checks that the index.html file renders first, if we inspect then we can see the content. Then it goes to main.ts to run as it runs first, there we find the bootstrap, it means running first. Bootstrap will run the appmodule and it will go to the app.module.ts. Then it will again find the bootstrap, it goes to app.component.ts. It will find the app.component.html it will render to the selector. Selector will go to the index.html and then it will be positioned in the body and then index.html will render.

app.component.ts: every component have a templateUrl and it will render html file. With this angular is a binding framework which helps us to bind our component to the html file. Component is a basic building block. We can have multiple component on the angular. Whenever we create a new component it will be added in the app.module.ts declaration. 

app.module.ts: module is a typescript class which is decorated by @NgModule.

module is a colleciton of components. We can create login, sign up, header component but it will be registered inside the @NgModule and in the declaration.

app.component.ts: component is a typescript class which is decorated by @Component

Data binding in angular:

String interpolation: {{}}

it is one way binding, where data flowing from component to view. (app.component.ts to app.component.html)

Property binding: []

Same as string interpolation it is one way binding from component to view. 

Things to be noted: String interpolation works only for type string and property binding works for all type of data.

Event binding: ()

(click) ="showMessage()", here click is the target event name and inside "", it is template statement. 

 Example:

//on the app.component.html 

<input type="text" (keyup)="consoleData($event)">

//on the app.component.ts 

consoleData(event:any){

    console.log(event.target.value);

  }

Two way binding: [()]

Data flows both of the ways, component to views and views to components. [] will be component to view, and () will be view to component.

In the input tag we are going to use the [(ngModle)] and for that we need to import the FormsModule, in the app.module.ts 

//app.component.html 

<label for="">Username? </label> <br>

<input type="text" [(ngModel)]="username">

<h3>Welcome to my channel {{username}}</h3>

//import FormsModule, on app.module.ts file

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule,

  ],

Directives:

Directive is typescript class which helps us to work with DOM manipulation. Three types of directives in angular:

Component: selector, we use this in the app.component.ts file autometically.

Structural: *ngIf,

<div *ngIf="show">

  <h1>Welcome to erytym code! </h1>

</div>

//ts file

  show : boolean = true;

 *ngFor,

//template file: 

<ul *ngFor="let emp of employee">

  <li>{{emp.fname}}</li>

</ul>

//ts file:

 public employee : any =[

    {id:1, fname:'John', salary:50000, gender: 'Male'},

    {id:2, fname:'Melly', salary:30000, gender: 'Female'},

    {id:3, fname:'Abraham', salary:100000, gender: 'Male'},

  ]

 We can combile *ngFor and *ngIf together:

<div>

  <h1>Male employee lists:</h1>

  <ul *ngFor="let emp of employee">

    <li *ngIf="emp.gender =='Male'">{{emp.fname}}</li>

  </ul>

  <h1>Female employee lists:</h1>

  <ul *ngFor="let emp of employee">

    <li *ngIf="emp.gender =='Female'">{{emp.fname}}</li>

  </ul>

</div>

 *ngSwitch, use use a strict(*) to define the structural directive.

Attribute: ngClass, ngStyle