Complete Angular Interview Guide: 1. Advantages and Disadvantages in Angular

Complete Angular Interview Guide
CloudMadeEasy
1. Advantages and Disadvantages in Angular

Advantages
a. SPA
b. Type Script support
c. Angular CLI
d. Dependency Injection
e. RxJS Support
Disadvantages
f. Complex
g. Less community support
2. Current Angular and Node JS version (2021)

Angular 11
Node JS 16 ,14(LTS)
3. Basic Angular CLI command
npm install –g @angular/cli Install Angular CLI
ng new my-first-project Create a Project
ng generate component my-component Create Component
ng server Run the project

ng build Build the artefact
Ng test Start unit testing
4. Angular Project Structure

5. Angular Component
A component is a typescript class consist of template ,class and
metadata
6. Angular Module
Angular apps are modular and Angular has its own modularity system
called NgModules. NgModules are containers for a cohesive block of
code dedicated to an application domain, a workflow, or a closely related
set of capabilities. They can contain components, service providers, and
other code files whose scope is defined by the containing NgModule
7. Angular Service
A TypeScript class decorated with @Injectable()
8. Life Cycle hooks in Angular
A lifecycle hook is a call back method triggered at a specific phase of a
component instance’s lifecycle.
Constructor vs ngOnInit
>A constructor is invoked first when a class is being instantiated
>ngOnInit give us a signal that Angular has finished initialising the component
constructor – Dependency Injection
ngOnInit- Get URI parameter data, viewChild data, Call Service
9. Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular
Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at
runtime.
Command :
ng build
ng serve
Ahead-of-Time (AOT) is a type of compilation that compiles our app at build time
Command :
ng build --aot
ng serve --aot
JiT AoT
Compiled in the browser. Compiled by the machine itself, via the
command line (Faster)
Each file compiled separately. All code compiled together, inlining
HTML/CSS in the scripts.
No need to build after changing your No need to deploy the compiler
code and before reloading the browser
page.
Suitable for local development. Suitable for production builds.
10. Binding in Angular
a. One-way data binding
Component :
export class TestComponent implements OnInit {
appName = "Hello Angular";
}
View :
<h1>{{appName}}</h1>
b. Event Binding
c. Attribute Binding
d. Attribute binding
<td [attr.colspan]="columnSpan">
e. Class Binding
<p [class]="myClasses">
f. Class and Style binding
g. 2 Way data binding
11.Routing
a. Routing is optional in angular
b. Wild card route / Default Route
c. {path: '', redirectTo : '/studentDetails', pathMatch : 'full'},
d. {path:'studentDetails', component : StudentDetailsComponent},
e. {path: 'studentMarks', component : StudentMarksComponent},
f. {path: "**", component : NotFoundComponent}
12.Nested Routing /Child Route

Route inside a route
https://Baseroute.com/student/Details/1
13.const routes: Routes = [
14. {path:'student', component : StudentComponent},
15. {path: 'studentMarks', component : StudentMarksComponent,
16. children: [
17. { path: 'Details/:id', component: StudentDetailsComponent,
18. children : [
19. { path: 'overview', component:OverviewComponent },
20. { path: 'spec', component: SpecComponent },
21. { path: '', redirectTo:'overview', pathMatch:"full" }
22. ]
23. }
24. ]
25. },
26. {path: "**", component : NotFoundComponent}
27.];
13. Lazy and Eager loading
Eager loading: To load a feature module eagerly we need to import it into
application module using imports metadata of @NgModule decorator. Eager loading
is useful in small size applications.
Lazy loading: To load a feature module lazily we need to load it using loadChildren property

in route configuration and that feature module must not be imported in application module.
Lazy loading is useful when the application size is growing.
Preloading: To preload a feature module we need to load it using loadChildren property and

configure preloadingStrategy property with RouterModule.forRoot. That feature module must
not be imported in application module.
const routes: Routes = [

{
path: 'country',
loadChildren: 'app/country/country.module#CountryModule'
},
------
];
14.Structural Directive in angular

Structural directives are responsible for the Structure and Layout of the DOM Element. It is used to hide or
display the things on the DOM .
ngIf
<div *ngIf="false;else id_selector">
<h1>
If Part-Structural Directive
</h1>
</div>
<ng-template #id_selector>
<h1>
Else Part-Structural Directive
</h1>
</ng-template>
ngFor
array1 = ["item1", "item2", "item3", "item4"];
<div *ngFor="let item of array1">
<p > {{item}} </p>
</div>
ngSwitch
<div [ngSwitch]="'one'">
<div *ngSwitchCase="'one'">One</div>
<div *ngSwitchCase="'two'">Two</div>
<div *ngSwitchDefault>Default</div>
</div>
15. Angular Forms and validation
Template Driven Form(import FormsModule from @angular/core )

Template driven form, most of the work is done in the template
<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)" >
<input type = "text" name = "emailid" placeholder = "emailid" ngModel>
<br/>
<input type = "password" name = "passwd" placeholder = "passwd" ngModel>
<br/>
<input type = "submit" value = "submit">
</form>
Reactive Forms/Module driven Form(import ReactiveFormsModule from

@angular/forms)
Complex or dynamic forms.
todaydate;
componentproperty;
emailid;
formdata;
constructor(private myservice: MyserviceService) { }
ngOnInit() {
this.formdata = new FormGroup({
emailid: new FormControl("[email protected]"),
passwd: new FormControl("abcd")
});
}
onClickSubmit(data) {this.emailid = data.emailid;}
16. Angular validation
To improve overall data quality by validating user input for accuracy and
completeness.
The following classes are added to, or removed from, input fields:
 ng-untouched The field has not been touched yet

 ng-touched The field has been touched
 ng-pristine The field has not been modified yet
 ng-dirty The field has been modified
 ng-valid The field content is valid
 ng-invalid The field content is not valid
<input id="name" class="form-control"
formControlName="name" required >
<div *ngIf="name.invalid && (name.dirty || name.touched)"
class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
17. Pipes in angular
Use pipes to transform strings, currency amounts, dates, and other data for
display.(We can have custom pipes)
The birthday is on
{{ birthday | date | uppercase}}

Complete Angular Interview Guide: 1. Advantages and Disadvantages in Angular

Uploaded by

Copyright:

Available Formats

Complete Angular Interview Guide: 1. Advantages and Disadvantages in Angular

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Complete Angular Interview Guide: 1. Advantages and Disadvantages in Angular

Uploaded by

Copyright:

Available Formats

Complete Angular Interview Guide

1. Advantages and Disadvantages in Angular

2. Current Angular and Node JS version (2021)

ng server Run the project

4. Angular Project Structure

12.Nested Routing /Child Route

Lazy loading: To load a feature module lazily we need to load it using loadChildren property

Preloading: To preload a feature module we need to load it using loadChildren property and

const routes: Routes = [

14.Structural Directive in angular

15. Angular Forms and validation

Template Driven Form(import FormsModule from @angular/core )

Reactive Forms/Module driven Form(import ReactiveFormsModule from

16. Angular validation

 ng-untouched The field has not been touched yet

17. Pipes in angular

You might also like