E2E => for End To End Testing
.ts => Typescript
-
Component
Format: [Component Name.component.ts] <= ts stands for Typescript
- Import the component from angular core
- Add Component selector,templete HTML URL,styleUrls CSS file name
- export class Component
-
Module:
Format: [Module Name.module.ts] <= ts stands for Typescript
** Port 4200 is already in use: For resolve this point you need to kill the process using command line **
A.Find what application/process is using the pro, type:
sudo lsof -i:4200 < Finding Port Number>
sudo netstat -tulpn | grep ':80\|:443'
B.Kill the process, type:kill 6782
kill -9 $(lsof -t -i:4200)
sudo kill -9 <Proceess Id>
ng generate
- It allow to create the element for angular using cli
- For create a new component
ng generate component servers <-- servers is component name>
- shortcut for creating a new component
ng g c servers <-- servers is component name>
** Understanding Data Binding : Typescript to HTML Design **
String Interpolation `{{ data }}`
Property Binding [Property]="data"
** Html Design to Typescript File (Event Binding) **
(event) = "expression"
Combination of Both: Two-way DataBinding
[(ngModel)] = "data"
What is Directives? Directivies are instructions in the DOM! Components are such kind of Directivies. We define a selector which tell the angular the place the business login in this place. This is our instructer that request to angular for add the code.
Indeed components are directives with the templete. For example
<p appTurnGreen> Received a green background!</p>
Here,appTurnGreen is custom dirtective we could build. Its also called the attribute directive[selector:[appTurnGreen]
This is the example of custom Directive.
@Directive({
selector: '[appTurnGreen]',
})
export class TurnGreenDirective {
name = 'This is the Awesome component';
}
** ngif directives:* why [*] becuase its strcutural directive. It means it will changes the stracture of our DOM It does not add the element.
<p *ngIf="serverCreated; else noServer">Server was created, server name is {{ serverName }}</p>
<ng-template #noServer>
<p>No server was created!</p>
</ng-template>
Unlike the structural directives, attribute directivies don't remove or add the elements. They only change the element they were place on.
For example; We are not accessing the property of HTML attribute/property but the accessing the property of in build directive called ngstyle.<-- directivies
<p [ngStyle]="{backgroundColor: getColor()}">Server with the Id {{serverId}} is {{getServerStatus()}}</p>
//constructor with out propery
export class Ingredient{
constructor(public name:string,public amount:number){}
}
** Property and Event Binding **
- HTML Elements -> Native Properties and Events
- Directive -> Custom Properties and Events
- Components => Custom Properties and Events
** Binding to custom Properties **
- How to expose the component properites outside itself. using decorator we can do it
export class ServerElementComponent implements OnInit {
//Input Decorator for expose the component properties
@Input() element:{type:string,name:string,content:string};
constructor() { }
ngOnInit() {
}
}
//Binding to Custom Properties
//Expose alias properties name
@Input() element:{type:string,name:string,content:string};
Understanding View Encapsulation:
CSS apply by deafault on whole document, but in angulare it is enforce by the behaviour of the css.Ideally of course CSS are belong to the component and it should encapsulat with itself.The style should apply to component that it has belong too.
encapsulation: ViewEncapsulation.Emulated // default is emulated
encapsulation: ViewEncapsulation.NONE // default is emulated
encapsulation: ViewEncapsulation.NATIVE // default is emulated
Global-angular-cli-version-greater-than-local-version
[https://stackoverflow.com/questions/44525746/global-angular-cli-version-greater-than-local-version]
-
Please take the following steps to avoid issues:
Your global Angular CLI version (1.3.2) is greater than your local version (1.0.0). The local Angular CLI version is used.
"npm install --save-dev @angular/cli@latest"
Understanding the component Lifecycle
[ngOnChanges]:
It will executed multiple time. Its always called after a bound property changes
[ngOnInit]:
This component is called once the component is initialized. It is not been displayed yet at that time.Angular finish some basic initialization our property now can access. Afte the constructor is being call the next method is ngOnInit is called.
[ngDoCheck]:
Called during change detection run. It is also called multuple time. Change detection is something that angular service is detected on the templete or of the component. Whenever something change in templete or component, property value change to update the HTML Dom Angular every check.
[ngAfterContentInit]:
This is called whenever the [ng-content] has been initlaized. Called After content [ng-content] has been projected into view.
[ngAfterContentChecked]:
Called everytime the projected content has been checked.
[ngOnAfterViewInit]:
Called After the component's view(and child View) has been initialized.
[ngAfterViewChecked]:
Called everytime the view(and child view) have been checked.
[ngOnDestory]:
Called Once the component is about to destroyed.
** Attribute vs Structural Directives **
* Attribute Directives:
1.Look like a normal HTML Attribute (possilby with databinding or event binding)
2.Only effect/Change the element they are added to
* Structural Directives:
1.Look Like a normal HTML Attribute but hava a leading (*)
2.Affect a whole area in the DOM (elements get added/removed)