6. What is a new feature called CLI prompt?
We know that it is difficult to keep in mind all those npm commands, but sometimes we may forget a few of them and get stuck, and at the end, we will find it with the help of different search engine. Using CLI prompts, now we can use different commands very easily like ng new and ng add.
When we type ng new and then press the enter key, it will ask three different named and the sequence is listed below.
- Application name
- Enable routing
- The format of the stylesheet
After providing appropriate values, it will create a new Angular project.
7. How to update Angular Material to the latest version?
To work with latest Materialized components, we need to update our latest angular material package using below command.
ng update @angular/material
8. How to check the current bundle size of an Angular app?
To optimize our Angular App, we have to very clear with the current bundle size. Based on the current size of our app, we can do optimization techniques. Run the below cmd to
ng serve
And you will get complete bundling details like this into your console.
9. What are the prerequisites for learning Angular?
There are some prerequisites to learn Angular, which are listed below.
- Basic knowledge of JavaScript
- Basic knowledge of HTML
- Basic knowledge of CSS
- Knowledge of Typescript add an advantage
- Any IDE to work with Angular
10. What is module?
Module is a bundle of functionalities of the Application. Modules are piece of code and it divides your application into small bundle of tasks.
11. Explain NgModule?
NgModule is a decorator which have metadata of the module. It describes components, services, directives, pipes, etc.
NgModule decorator having the following metadata properties :
- declarations : Declare view related things like component, custom directives, pipes to make available in this module.
- exports : To makes the declaration stuffs to available on other modules.
- imports : import the other modules features.
- providers : Register the set of servicesof the Application.
bootstrap–Bootstrapping root component of the App. This is very 1st component which rendering on the browser.Every angular application must have at least one
12. What is Angular CLI?
The Abbreviation of CLI is Command Line Interface. It is a command line tool which is used to create, initialize, generate andto manage the angular application easily.
Angular CLI comes with many inbuilt cmds, by using these cmds we can easily manage the Application.
Install the Angular CLI by using the below cmd,
npm install -g @angular/cli
13. List out the features of Angular CLI?
Angular CLI is a powerful command-line tool by which we can create new Angular stuffs, build, test and deploy the angular application.
- Bootstrapping Angular app
- Code generation options for Component, Module, Class, Pipes, Services, Enums.
- Unit test runs
- Testing Angular app
- Build and deployment our Angular application
14. What is Angular components?
Components are the main building block of an Angular Application.Angular apps have collection of Angular component trees. Components also one of the directives with View. If you want to render any view on the browser, component is the main part.
15.What are directives?
Directives are Instructions to the DOM. Directives instruct how to behave an existing DOM element.Directive update the appearance of a DOM element.
16. What are types for directives?
There are three types of directive in angular and these are as follows:
- Component or Template Directive : It renders a View or Template.
- Structural directives : It changes or updates structure of the DOM like Adding or removing DOM elements based on the given condition.
- Attribute directives :It changes or updates the appearance of the DOM like Adding or Removing DOM attributes based on the given condition.
17. What are the differences between Component and Directive?
Components |
Directive |
Component use @Component decorator and its meta-data properties. |
Directives use @Directive decorator and its meta-data properties. |
Components are mainly used to Render Views. |
Directive are used to change the behaviouror update DOM structure of the DOM element. |
It is used to divide the application into smaller views. |
It is used to manipulate DOMs. |
Holding Application Views |
Does not have any Views |
18.How to use Angular CLI Commands?
Angular Command Line Interface is the tool and by using this tool, we can scaffold, initialize, generate different files, and can build or deploy the angular application easily.
To use different commands, we should install the package by using npm below command.
npm install -g @angular/cli
19. What are Angular lifecycle hooks available?
There are 8 angular lifecycle hooks are as follows:
- ngOnChanges: This method is called When the value of a data bound property changes.
- ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
- ngDoCheck: This is for the change detection and to act on changes that Angular cannot or won’t detect on its own.
- ngAfterContentInit: This is called in response after Angular projects external content into the component’s view.
- ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.
- ngAfterViewInit: This is called in response after Angular initializes the component’s views and child views.
- ngAfterViewChecked: This is called in response after Angular checks the component’s views and child views.
- ngOnDestroy: This is the clean-up phase just before Angular destroys the directive/component.
20. How to create a new Angular app?
To create a new Angular app using CLI command, then we can use below command.
ng new
It will take a few seconds or minutes based on our internet connection speed and then the new angular app will be created with the basic configuration.
21. How to compile the Angular app?
After creating a new Angular app, now it’s time to compile our app, for that we can use below command to serve our app.
ng serve
After executing above given command, our application will start building and it can also be helpful to rebuild the app after any changes occurred.
If you want to open app automatically into a new window from the browser then we can use the flag –o like this.
ng serve –o
22. How to change default port number 4200?
If you have created new Angular app and server the app using ng serve, then our app will be executed on URL localhost:4200, but we can change it using an additional flag along with ng serve which is –port.
ng serve –port 4300
23. What is Component in Angular?
An Angular component mainly contains a view, class, and metadata. It is used to represent the data visually in our view. A component can be thought as a web page. An Angular component is exported as a custom HTML tag like as:
When we create a new Angular app using CLI, it will create default App component as the entry component of application.
If we are using Angular CLI than new component will be created using the below ng command.
ng generate component componentName
24. What is a data binding?
Data binding is one of the main building blockof Angular application which establish communication between a component and the DOM element.
There are four types of data binding in angular and these are as follows:
A) Interpolation : {{ value }} adds the value of a property from the component to DOM
B) Property binding : Value is passed from the component to the specified html attribute:
Syntax : [property]=”value”
C) Event binding : When a specific DOM event happens like click, change, keyup etc., then call the specified method of the component. The communication is DOM to Component.
Syntax : (event)=”functionName()”
D) Two-way Binding : Two-way data binding allows in both ways component to DOM and voice-versa.
Syntax : [(ngModel)]=”value”
25. What is the Interpolation Expression?
Interpolation expressions are the same expression that we use with JavaScript. But the difference is that we can use it within our Html template, so it looks like that we are using JavaScript along with Html but keep in mind that not every JavaScript expressions are supported like (new), (++) and (–).
26. What is Property Binding?
Property binding is generally used to show or update the value of the variables in component and vice versa. We can also call it one-way data binding thus it is not used to update the two-way binding mechanism, and value will be reflected at the component level.
27. How to implement Two-way data binding in Angular?
Two-way binding is one of the strongest binding mechanisms, where two different bindings are merged
i.e. input and output bindings.
It means that Event binding works with the two different binding mechanisms at a time and generates the output based on the event which was triggered.
For two-way data binding, we will use the punctuation [( )] in order to bind the two-way data.
It can be happen using the directive called ngModel which listen to the input for any changes and return the output.
We will understand more by implementing the simple example, where we will type the text into the input and at the same time, we will get the value of the same input value.
28. What is metadata?
Metadata is used to decorate the class so that it can configure the expected behaviour of a class. Metadata can be attached to the TypeScript using the decorator.
A) Class decorators : e.g. @NgModule and @Component
B) Property decorators Used for properties inside component. for example, @Input and @Output
C) Method decorators: Used for methods inside component class, e.g. @HostListener
D) Parameter decorators Used for parameters inside component class constructors, e.g. @Inject
29. What is the difference between constructor and ngOnInit?
Constructor |
ngOnInit |
It is a default method of the class that is executed when the class is instantiated.
|
It is a component life cycle hook called by Angular to indicate that the Angular is done creating the component.
|
Used for Injecting dependencies
|
business logic performed |
Called by JavaScript engine |
Called by angular |
Not everything in component is initialized at the time of invocation |
Everything is ready at the time of invocation |
No need to import anything |
In order to use OnInit we have to import it in the component class like this:
import {Component, OnInit} from ‘@angular/core’; |