1. app component and app module
Angular application starts from app component, which is created by "ng new" command, the app component is loaded from index.html.
app.module.ts defines all components implement and export from the project as well as components imported by the project.
2. component
Component is defined by ts file, template html file, and optional css file. Ts file is the key file, which defines the component element name, as well as template html file and css file name.
3. string interpolation
In component html template file, if any property is defined by ts file, then inside html template file, the content of the property can be embedded using string interpolation syntax {{propertyname}}
4. property binding
In component html template file, to set an attribute for an html element using property binding with the below syntax <img alt="item" [src]="itemImageUrl">, note itemImageUrl is the property exposed from ts file. src is the element attribute name, which needs a square bracket.
5. event binding
For input element, once a method is defined in ts file, then in html template file, the event can be bind to the method using below syntax:
<button (click)="onSave($event)">Save</button>
click is the event name for the element without "on", and onSave is the method defined in ts file. $event is the event parameter.
6. two way binding using [(ngModel)]
In order to make two way binding work for html input elements, first in app.module.ts import FormsModule as below
import { FormsModule } from '@angular/forms';
Then using the below syntax to set two way binding
<input type="text" [(ngModel)]="somepropertydefinedinTSfile" />
As a result, the value input by user will be set to somepropertydefinedinTSfile, and value set to somepropertydefinedinTSfile will show in the input element.
7. *ngIf for conditional rendering
For any html element, *ngIf can be used to conditionally render the element, if the value of *ngIf is true, then rendering the element. Otherwise, not rendering the element.
<p *ngIf="shouldRenderThisElement">my name is {{myName}}</p>
8. use ngStyle and ngClass to set css style dynamically
In order to dynamically set a css style for an element, use the below ngStyle syntax
<p [ngStyle]="{backgroundColor: getColor()}">my text</p>
getColor() is the method implemented in ts file to return a string of color name, like "red".
In order to dynamically set a css class for an element, use the below ngClass syntax
<p [ngClass]="{onlineCssClass: applyOnlineCssClass === true}"> my text </p>
where onlineCssClass is a css class defined in css file, and applyOnlineCssClass is a boolean property defined and exported from ts file.
9. use *ngFor to render array object
ngFor will loop through an array and render each array element into a separate html element as shown below:
<serverComponent *ngFor="let server of myServerArray; let i = index">{{i}}: {{server.name}}</serverComponent>
10. using @Input and @Output for passing data between parent and child component
When parent component initializes children components, parent can pass data to children by setting the children component's attributes. The children component's attributes must be exposed to external using @Input directive. The input direct can also take a parameter as alias of the inner property.
@Input() myColor = 'red'
The child component can use @Outeput directive to raise an event to notify the parent, @Output must have the type of EventEmitter.
Child TS file:
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
Child Html file:
<button type="button" (click)="addNewItem(newItem.value)">Add to parent</button>
Parent TS file
addItem(newItem: string) {
this.items.push(newItem);
}
Parent Html file:
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
11. ViewEncapsulation setting
Usually the css style only applies to the component elements, however by setting the component directive ViewEncapsulation to none, the defined css styles will become global and applies to all matched html elements.
encapsulation: ViewEncapsulation.None
12 html template local reference
In component html template file, for any html element, add #localReferenceName as attribute will set the html element to this local reference variable. In the template file, the local reference variable can be used anywhere as the html element's value. A particular use case is passing the local reference variable as event callback parameter, so TS file can get access to the html DOM element.
13 using @ViewChild to access local reference from ts file
After defining a local template reference, without passing it as event callback method parameter, ts file can also use @viewChild to access the local reference as ElemetnRef type as below code in ts file
@ViewChild('mylocalTemplateVariableName', {static: true}) myinputElement: ElementRef;
ElementRef has a property of value to get access the html DOM element.
14. life cycle hook
ngOnChanges: called after a bound input property changes
ngOnInit: called ocne hte component is initialized
ngAfterViewInit: called after the component's view has been initialized
ngOnDestry: called after the component is destroyed
15. Service provider
First implement a regular javascript class as service, and add @Injectabel({providedIn: 'root'}) decorator in the class
Then in the component uses the service, in constructor, add a private parameter for the service type, angular will inject a shared service instance to be used by the component. One special use case for shared service is using service for cross component communication.
16. Router
In app.module.ts, define router pattern, and add the router into imports section
RouterModule,forRoot(myappRouterConfig)
Then in app component html file or any sub component html file, add the below code, which will render the matched component in it
<router-outlet></router-outlet>
In the html a href link element that load the specific routing path, use routeLink to set the target url, so it will skip reloading the page from server as a regular link does
<a routeLink="/myLinkUrl" routerLinkActive="myActiveCssClass">my link</a>
You can also programmatically router to a specific url using Router package,
import {Router} from '@angular/router'
constructor(private router: Router) {}
onMyClickEvent() {
this.router.navigate(['/myservers']);
17. Using ActiveRoute to get router url parameter
If the router path includes dynamic parameter preceding with ':', such as "users/:id/:name", then ActiveRoute service can be used to retrieve the router url parameters from "/users/1/john' as below:
userId = this.route.snapshot.params['id']; //1
userName = this.route.snapshot.params['name']; //john
Note route.snapshot only take the value when the component is created. After the creation, if the url parameter is changed, the snapshot.params value will not change. So if you need to get the updated url parameter, you will need to subscribe to this.route.params as below in ngOnInit() method
this.route.params.subscribe( (params: Params) = {
userId = params['id'];
userName = params['name'];
}
18 Protect router path using CanActivate
In order to prevent unauthorized user to access a router path, you can implement a service which implements CanActivate interface and then set the router path canActivate attribute to this service. When the router path is loaded, the canActivate method will be called, and if the method return false, it will prevent the load process. You can also redirect to login page if canActivate return false.
19. Observable, pipe and Subject
By using rsjx library, you can subscribe to an Observable and implement next, error, complete callback method to handle the date, error or complete event.
Pipe is an operations that you can chain to process the data provided data by observer, the processed data will be passed to the subscriber.
Subject exposes both the next() method to feed the data, and the observable that allows subscribers to subscribe, so you do not need to implement the raw observable.
20. Form submission with FormModule
First import FormModule in app.module.ts, then in html template file with form element, for each input element that should be included in the form data, add ngModel in its attribute, and also set the name attribute
<input type="text" id="username" ngModel name="username"/>
the above ngModel attribute also be changed to property binding [ngModel] or two way binding [(ngModel)].
in form element, set the form submit method as below
<form (ngSubmit)="myFormsubmitMethod(f)" #f="ngForm">
Then when submit button is clicked, parameter f as type of NgForm will contain the form data.
As another option to get the ngForm data from submit method'a parameter, @ViewChild can also be used as below in TS file
@ViewChild('f') myForm: NgForm;
onSubmit(){
console.log(this.myForm);
}
If you need to handle individual input element in html template file, you can also set a local reference variable to it as type of ngModel
<input type="text" id="username" ngModel name="username" #myname = "ngModel" />
21 Form submission with React form
React form lets ts code to directly access the FormGroup and FromControl elements.
First import FormGroup and FormControl into app.module.ts. Then in ngOnInit() method, create the FormGroup object that contains few FormControl element as below
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
'username' : new FormControl(null, Validators.required),
'email': new FormControl(null, [Validators.required, Validators.email])
})
}
onSubmit() {
console.log(this.myForm);
}
In html template code, update as below
<form [formgroup]='myForm' (ngSubmit)="onSubmit()">
<input type="text" id = "username" formControlName="username">
<input type="text" id="email" formControlName="email">
</form>
In addition of FormGroup and FormControl, FormArray can be used to handle array input element.
22 HttpClient for sending server request
HttpClient class can be used to send server request by calling post or get method, it returns an observable, so you can subscribe a callback method to handle the server response.
It is common practice to call pipe(operatorCallback) on HttpClient.get or post method, so you can transform the data before subscribe on it.
