Self: Angular Notes

Checklist :

Angular :

- Components
    - How to Create Commponent
    - How to add styling to component
    ○ How to pass data from parent to the child
    ○ How to pass data from child to the parent 
- What is Model
    ○ How to create and use model
- [x] Data binding 
- [x] How to use images ?
- [x] How to use bootstrap classes ?
- How to consume a rest service ?
- How build command works 
- How to deploy a Angular project in tomcat server using WAR
- How different configuration works with ng build command.







-> Understand how this bootstrap classes works for the column and row sizes 
-> Understand how model works in angular    --> recipe.model.ts

Learn : How to use the bootstrap framework 


TIP : 
1. Use Source maps  and webpack in the developer tools to find the potential issues and rectify it.
2. Bindiing to cutom property to pass the data from one component to the another 
3. @Input is used when we wants to pass something from parent to the child
4. @Output is used when we wants to emit anything from child to the parent 

Angular Notes :

Angular

make sure node, npm and angular cli is installed before this

1. create a new project : ng new hello-world

2. main.ts is the program from there where we start

3. style.css will be used for global css

4. Angular cli uses webpack that is a build automation tools so anytime we save it will automatically compile

webpack --> compile --> bundle --> minified --> so that it is optimized

webpack uses hot module replacement --> so what will happen everytime you save the project it will automacically going to compile and then bundle and minified the project

Angular JS - (Major changes) -> Angular 2 - (No major changes )-> Angular 4 --> now it is just called as --> Angular

Angular --> it is from Angular 2 to Angular 10

// ----------------------------------------------------------------------------------------------------------------------

Angular Udemy Course

• Data binding : means how we can show content from ts to the html file , thats how we can bind dynamic contene to static html

• index.html is the single page that is served in the browser

How to create a component

1. Just create a folder inside app folder
2. server --> create one file --> server.component.ts
3. inside ts file we will have once class we will export that

4. And we will have a component decorator which will have a javascript object and it has two things one is selector that's how we are going to call this component in the app component and the html file that is server.component.html --> thta will be served when we call this component.

5. now call this component in the html file of app component 6.this will not work so to make it work ,we have to add the component in the app.module.ts file here we register all the component into one module

---

how to create a component using cli

go to the base directory

ng generate component servers

how nesting of component works !

• we can do the nesting of the component by directly calling one component inside another

like we can call app-server component multiple times inside the app-servers component.

What is inline component

so inside the component decorator we use templateUrl but what we can do , we can directly use html inside the ts so for that we have to use the template instead of templateUrl and we can use back tick and then we can write our html this will be used when we have less html

import { Component } from "@angular/core";

@Component({
    selector:'app-server',
    template :`<h1>this is single server inline component </h1>`
})
export class ServerComponent {

}

DATA BINDING

when we want the business logic to show and inteact with the users we use data binding

to show information from ts file to html --> string interpolaton and property binding user take some action in the html and trigger some function --> event binding

Two Way binding

->combination of both on which we can see the data as well as intract with it , we use two way binding

String interpolation

these two are variable declarared in ts file

Server id is {{ serverId }} and Server Status is {{ serverStatus }}

--> we can also call method using string interpolation

Server id is {{ serverId }} and Server Status is {{ getServerStatus() }}

--> Ts file for above is import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-server', templateUrl: './server.component.html', styleUrls: ['./server.component.css'] }) export class ServerComponent implements OnInit {

constructor() { }

ngOnInit(): void { }

serverId = 1; serverStatus= "offline"

getServerStatus() { return this.serverStatus; }

}

Property Binding

-> this is similar to string interpolation, in string interpolation we can use to show the data but in property binding we will use the property of the element and bind it to the variable in the ts files.

<button class="btn btn-primary" [disabled]="allowNewServer" >Add Server</button>
<app-server></app-server>
<app-server></app-server>

here allowNewServer is a variable in the ts file to which we have bind the property disabled of the elementbutton every html element is having a set of property.

Event Binding

in property binding we have bind the property of the element using [] in the event binding we will bind the event such as click using () to the variable or methods in the ts

so what will happen once we click on the button we will call the function will update some value and that value we will show in the html

<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onCreateServer()" >Add Server</button>
<hr>
<p>{{ serverCreationStatus }}</p>
<app-server></app-server>
<app-server></app-server>

passing data and using event binding

we can pass the data using the $input from the input element and then we can use that in the function

what is two way binding

here we can use ngModel and we can combine , property and event binding [(ngModel)]="serverName"

as soon as the server name is updated it will be update the in the class files.

Directive ngIf

what if we want to add or show some element as soon as we change something in that case we can use the directive called as *ngIf, we have to add a start since it is structural directive and it basically manipulates the structurte

so ngIf required true or false

<label>Server Name</label> <br>
<!-- <input type="text" name="serverName" class="form-control" (input)="onUpdateServerName($event)"> -->

<input type="text" name="serverName" class="form-control" [(ngModel)]="serverName">
<hr>
<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onCreateServer()">Add Server</button>
<hr>
<p *ngIf="serverCreated">{{ serverCreationStatus }}</p>

here we can that as soon as serverCreated variable value changes to true the parapgahy text will be enabled.

ngStyle , With the help of this we can change the element style dynamically

here is the below mentioned code ngStyle is used and in the right side we have to give javascript object

with backgroundColor and backgroundColor can be fetched from server based on some condition

<h3 [ngStyle]= "{backgroundColor: getColor()}" >Server id is {{ serverId }}  and Server Status is {{ getServerStatus() }} </h3>

``TS file

getColor() { return this.serverStatus === "online" ? "green" : "red"; }

## ngClass
ngClass is one of the directive it will attach the class based on some conditions ,
here you can see that if the serverStatus is online then the class will be attached.

Server id is {{ serverId }} and Server Status is {{ getServerStatus() }}

```

##