Source: https://www.youtube.com/watch?v=GwaVHu561CY
1) Building blocks of Angular 6?
The Angular application is made using the following:
- Modules
- Component
- Template
- Directives
- Data Binding
- Services
- Dependency Injection
- Routing
2) What is the sequence of Angular Lifecycle Hooks?
- OnChange
- OnInit
- DoCheck
- AfterContentInit
- AfterContentCheck
- AfterViewInit
- AfterViewCheck
- OnDestroy
3) In how many ways the Data Binding can be done?
Data binding happens between the HTML (template) and typescript (component). Data binding can be done in 3 ways:
- Property binding
- Event-binding
- 2-way data binding
4) Explain the usage of {{}}?
The set of {{}} when used with an HTML tag, represent data from a component.
For example on a HTML page which has <h1>{{variableName}}</h1> here the 'variableName' is actually typescript (component) data representing its value on the template.
This entire concept is called String Interpolation.
5) What is a RouterOutlet?
RouterOutlet is a substitution for templates rendering the components.
In other words, it represents or renders the components on a template at a particular location.
6) How to handle Events in Angular 5?
Any activity (button click, mouse click, mouse hover, mouse move, etc) of a user on a frontend/web screen is termed as an event.
Such events are passed from the view (.html) page to a typescript component (.ts)
7) What is Routing?
Routing helps a user in navigating to different pages using links.
8) What is Dependency Injection?
When a component is dependent on another component the dependency is injected/provided during runtime.
9) What are Services in Angular and what command is used to create a service?
Services help us in not repeating the code. With the creation of services, we can use the same code from different components.
Here is the command to create a service in angular, ng g service User (a UserService is created when this command is used).
10) What is ViewEncapsulation?
ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not.
There are 3 ways to do this in Angular:
- Emulated: styles from other HTML spread to the component.
- Native: styles from other HTML do not spread to the component.
- None: styles defined in a component are visible to all components.
11) What does a router.navigate do?
When we want to route to a component we use route.navigate.
Syntax: this.router.navigate(['/component_name']);
12) What is ng-content Directive?
The HTML elements like p (paragraph) or h1 (heading) have some content between the tags.
For example, <p>this is paragraph</p> and <h1>this is heading</h1>.
Now, similar to this, what if we want to have some custom text or content between the angular tags like <app-tax>some tax-related content</app-tax> This will not work the way it worked for HTML elements.
Now, in such cases, the <ng-content> tag directive is used.
13) What is the use of @Input and @Output?
When it comes to the communication of Angular Components, which are in Parent-Child Relationship, we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Child Component to receive an event from Child to Parent Component.
14) Differentiate between Components and Directives?
Components break up the application into smaller parts.
Whereas, Directives add behavior to an existing DOM element.
15) Which of the Angular life cycle component execution happens when a data-bound input value updates?
ngOnChanges is the life cycle hook that gets executed whenever a change happens to the data that was bound to an input.
16) What is Transpiling?
Transpiling is the process of converting the typescript into javascript (using Traceur, a JS compiler).
Though typescript is used o write code in the Angular applications, the code is internally transpiled into javascript.
17) What are ngModel and how do we represent it?
ngModel is a directive which can be applied on a text field. This is a two-way data binding.
ngModel is represented by [()]
18) What does a Subscribe method do?
It is a method which is subscribed to an observable.
Whenever the subscribe method is called, an independent execution of the observable happens.
19) Differentiate between Observables and Promises?
Observables are lazy, which means nothing happens until a subscription is made.
Whereas Promises are eager; which means as soon as a promise is created, the execution takes place.
Observable is a stream in which passing of zero or more events is possible and the callback is called for event.
Whereas, promise handles a single event.
20) What is an AsyncPipe?
When an observable or promise returns something, we use a temporary property to hold the content.
Later, we bind the same content to the template. With the usage of AsyncPipe, the promise or observable can be directly used in a template and a temporary property is not required.
21) What is AOT Compilation?
Every angular application gets compiled internally.
The angular compiler takes javascript code, compiles it and produces javascript code again.
Ahead-of-Time Compilation does not happen every time or for every user, as is the case with Jus-In-Time (JIT) Compilation.
22) What is Redux?
It is a library which helps us maintain the state of the application.
Redux is not required in applications that are simple with the simple data flow, it is used in Single Page Applications that have complex data flow.
23) What are Pipes?
This feature is used to change the output on the template; something like changing the string into uppercase or displaying it on the template.
It can also change Date format accordingly.
24) Differentiate between ng-Class and ng-Style.
In ng-Class, loading of CSS class is possible. Whereas, in ng-Style we can set the CSS style.
25) What is the purpose of using package.json?
With the existence of package.json, it will be easy to manage the dependencies of the project.
If we are using typescript in the angular project then we can mention the typescript package and version of typescript in package.json
