Summary Full information about angular js

1




Learn Angular
Angular Setup & Config
1. The first version of Angular is called AngularJS. After that, it is referred to
simply as Angular.
2. Typescript provides errors and warnings during compile time that are easier to
understand. Typescript is a superset of Javascript.
3. Install Angular with npm → npm install -g @angular/cli@latest
4. Creating app → ng new my-app
5. Create app in existing directory → ng new existingDir --directory ./
6. Run app → ng serve


Project Setup using Bootstrap for Styling
1. Run the command - npm install –save bootstrap
2. Add the Bootstrap reference link to the styles array under the `architect>build`
section of the angular.json file.
Link → "node_modules/bootstrap/dist/css/bootstrap.min.css"


Lifecycle Method
1. OnChanges(): Called after a bound input property changes. 'Bound' means
properties decorated with @Input(). It receives arguments and is also invoked
when a component is initialized.
2. OnInit(): Called once the component is initialized and will run after the
constructor. It used to perform a custom change detection & responding to the
changes in a component.
3. DoCheck(): Called during every change detection run and will be executed
frequently.
4. AfterContentInit(): Called after content (ng-content) has been projected into
view.




S M HEMEL
Senior Software Engineer
Email:

, 2




5. AfterContentChecked(): Called every time the projected content has been
checked.
6. AfterViewInit(): Called after the component’s view (with child views) has been
initialized.
7. AfterViewChecked(): Called every time the view (with child view) has been
checked.
8. OnDestroy(): Called once the component is destroyed.




Angular Basics
Component
1. It is best practice to create all components in the 'src' directory, and each
component should have its own dedicated directory.
2. If we create a component manually, we need to create three different files.
(e.g. xyz.component.ts, xyz.component.html, xyz.component.scss)
3. General Structure of a Component(demo.component.ts) →




S M HEMEL
Senior Software Engineer
Email:

, 3




----------------------- demo.component.ts -----------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-demo',
// template: '<p>Hello</p>' // We can write HTML code here
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.scss'],
// styles: [`h3{color: white}`] // We can write CSS code here
})
export class DemoComponent {}


[Note: We cannot use `template` and `templateUrl` simultaneously; the same rule
applies to `styles` and `styleUrls`.]

4. To use a component in a project, ensure that it is added to the declarations
array in either the app.module.ts file or a dedicated module.ts file.
5. Create a component using CLI command →
ng generate component component_name
Shortly, → ng g c component_name
Note: All components will be created inside the app directory.
6. When creating a component using the CLI command, add --skip-tests true
to avoid generating the test file.
7. An Angular component has three types of selectors. Component use in HTML
by the help of selector.
CSS Selector → selector: 'app-xyz'
<app-xyz></app-xyz>

Attribute Selector → selector: '[app-xyz]'
<div app-xyz></div>

Select by Class → selector: '.app-xyz'
<div class="app-xyz"></div>



Data Binding
1. String interpolation → {{data}}
<p>{{ 'Server' }} with ID {{ severId }} is {{ getServerStatus() }}</p>

2. Property binding → [property]=”data”


S M HEMEL
Senior Software Engineer
Email:

, 4




<button class="btn btn-primary" [disabled]="allowServer"></button>
<p [innerText]="allowServer"></p>

3. Event binding → (event)=”demoFunction()”
<button [disabled]="allowServer" (click)="onCreateServer()"></button>
<p>{{ serverCreationStatus }}</p>

4. To enable two-way binding, the ngModel directive must be enabled by adding
FormsModule to the imports array in the app.module.ts file.
<input type="text" class="form-control" [(ngModel)]="serverName" />
<p>{{ serverName }}</p>

5. Triggering an event from another component is called Custom Events binding →
----------------------- app.component.html ----------------------
<div class="container">
<app-demo
(serverCreated)="onServerAdded($event)"
(blueprintCreated)="OnblueprintCreated($event)">
</app-demo>
</div>
------------------------ app.component.ts -----------------------
export class AppComponent {
onServerAdded(serverData: {name: string, content: string}) {}
onblueprintAdded(serverData: {name: string, content: string}) {}
}
----------------------- demo.component.ts -----------------------
export class DemoComponent {
@Output() serverCreated = new EventEmitter<data_type>();
@Output() blueprintCreated = new EventEmitter<data_type>();
// Added parenthesis end of the event emitter to call its constructor to create a new
event emitter object which is stored in the serverCreated and blueprintCreated.
onAddedServer() {
this.serverCreated.emit({ name: "", content: "" });
}
}


[Note: Add parentheses at the end of EventEmitter to call its constructor and create a
new EventEmitter object, which is now stored in the serverCreated and
blueprintCreated variables.]




S M HEMEL
Senior Software Engineer
Email: