All commands to create a basic angular application
To create web application in angular we required the node. Node can be installed using the following link :
https://nodejs.org/download/release/latest/
to install angular using npm
>npm install -g @angular/cli
To create a new application using CLI
>ng new app_name
--routing ->this will routing related file in project.
Move to the angular project by
>cd app_name
run >ng serve
ng serve used to build the app, start server, rebuild the application when there is a change in source files
To open the browser after starting the server
> ng serve --open
To change port number from default port number 4200
> ng -server --port 5000
> ng -server --port 5000 --open
To install bootstrap locally instead of global
>npm install --save bootstrap
To use bootstrap in angular, add bootstrap in the angular.json
**** add code
An angular project overview:
Every project starts with index.html based on the matching of selector in app.component.ts respective templateUrl will be included in the index.html page.
> ng generate component component_name
*ngFor is used to loop over the array example: Create a table row for each array element.
How angular pages get loaded:
Inside Index.html uses selector of the app components inside app components we use generated components which we want to display on web page
We can use templateUrls and template or styleUrls and style for inline.
For inline styling use
styles:[
`
`
]
3 ways of selecting components
1. Selector:'selector' in ts and in html we use <selector></selector>
2. Selector:'[selector]' here selector as a attribute we can use in html by <div selector></div>
3. Selector:'.selector' here's selector as a clasee still we can used in html by <div class="selector"></div>
Project Lombok
It is a modern java project which will automatically generates the getter and setter instead of manual work.
To download project lambok: https://projectlombok.org/downloads/lombok.jar
@Data it will generate getter and setter.
(click)="method_name()" in HTML page
In related component.tst
method_name(){
this._router.navigate(['/redirect_page_link'])
}
In app-routing.module.ts
const routes: Routes = [
{ path: 'redirect_page_link', component:Component_name }
];
2 method to redirect pages:
In HTML:
routerLink="['/redirect_page']"
Directives
NgModel
Used for two way binding
[ngStyle]
[ngClass]
Conditional statements
<div *ngif="person.num=123; else elseblock"> true </div>
<ng-template #elseblock> False </ng-template>
Looping statements
<div *ngFor="let item of list; let i = index"
[ngStyle]="{backgroundColor: i>4 ? 'blue' : 'red'}" >
{{ i }}
</div>
Data binding
A way of communication between the typescript code and html code.
1.String interpolation from ts to html
Assign variable in ts and use them in html inside {{}}
And can create a method inside ts and returned value can be used in html page by calling method
2.Property binding from ts to html
Used in a case where if we want to disable button for few seconds
Inside button tag [disabled]="name"
Inside ts constructor can use like setTimeout(()=>{ this.name=true;
},2000);
3.Event binding from html to ts
Create click event in html like
(click)="onclick()"
In ts create a onclick method and return string you want to display on html page.
4.Two way binding from html to ts and ts to html at a time.
We use directives
In html page [(ngModel)]="name"
Assign name in ts file
Local reference in html code
Add local reference start with # i.e #name1
(click)="onclickmethod(name)"
In ts onclickmethod(nameinput:HTMLInputElement){
This.name=nameinput.value
}
Add local reference start with # i.e #name2
@ViewChild('name2',{static:true}) name3 ElementRef
Inside method can assign like this.name3.nativeElement.value
Lifecycle in angular
ngOnChanges
Called after a bound input property change
ngOnInit
Called once the component is initiated
Renderer
It can be generated by by cli using
>ng generate directive directivename
Next create private variable of type renderer2 and perform operation in ngOnInit or custom method to variable
@HostListener()
@Hostbinding this same the renderer and simple than then renderer for example
@HostBinding('style.backgroundColor') bg: string='blue'
This blue can be change HostListener on mousenter and mouseleave
ngSwitch
<div [ngSwitch] = "value">
<p *ngSwitchCase="1"> value is 1</p>
<p *ngSwitchCase="2"> value is 2</p>
<p *ngSwitchCase="3"> value is 3</p>
<p ngSwitchDefault> value is default</p>
</div>
Routers
this.router.navigate(['/name',Id,'edit'],{queryParams:{name2:'1'}, fragment:'loading'});
Above is equivalent to
localhost:4200/servers/1/edit?name2=1#loading
To retrieve the data from url we can use
This.route.snapshot.queryParams and fragment by this.route.snapshot.fragment
Above will work on importing activatedRoute
Wildcard route
When we pass path which doesn't exit will redirect to default page by
{path: 'notfound' , component: pagenotfoundcomponent},
{path: '**', redirectTo: '/notfound'}
Temp
To convert string into number add + infront of string
