Q. 1 What is TypeScript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language. You can install it globally as
Q 2 What are directives?
Directives add behaviour to an existing DOM element or an existing component instance.
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Now this directive extends HTML element behavior with a yellow background as below
<p myHighlight>Highlight me!</p
Q 3 What are lifecycle hooks available?
Angular application goes through an entire set of processes or has a lifecycle right from its initiation to the end of the application. The representation of lifecycle in pictorial representation as follows,
The description of each lifecycle method is as below,
ngOnChanges: When the value of a data bound property changes, then this method is called.
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 detection and to act on changes that Angular can't 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 cleanup phase just before Angular destroys the directive/component.
Q 4. What is the difference between constructor and ngOnInit?
TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
export class App implements OnInit{
constructor(){
//called first time before the ngOnInit()
}
ngOnInit(){
//called after the constructor and called after the first ngOnChanges()
}
}
Q 5 What is a service?
A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.
Let's create a repoService which can be used across components,
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable({ // The Injectable decorator is required for dependency injection to work
// providedIn option registers the service with a specific NgModule
providedIn: 'root', // This declares the service with the root app (AppModule)
})
export class RepoService{
constructor(private http: Http){
}
fetchAll(){
return this.http.get('https://api.github.com/repositories');
}
}
The above service uses Http service as a dependency.
Q 6 What are observables?
Observables are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple values. In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it. The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.
Q 7 What is the difference between promise and observable?
Below are the list of differences between promise and observable,
Q 8 What are the various kinds of directives?
There are mainly three kinds of directives,
Components — These are directives with a template.
Structural directives — These directives change the DOM layout by adding and removing DOM elements.
Attribute directives — These directives change the appearance or behavior of an element, component, or another directive.
Q 9 What are different types of compilation in Angular?
Angular offers two ways to compile your application,
Just-in-Time (JIT)
Ahead-of-Time (AOT)
Q10 What is Angular Ivy?
Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.
Q11 what are the applications of HTTP interceptors?
Http Interceptors are part of @angular/common/http, which inspect and transform HTTP requests from your application to the server and vice-versa on HTTP responses. These interceptors can perform a variety of implicit tasks, from authentication to logging.
The HTTP Interceptors can be used for different variety of tasks,
Authentication
Logging
Caching
Fake backend
URL transformation
Modifying headers
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
],
Q 12 how to pass data one component to another component
Angular provides us @Input decorator by using that we can pass data from parent component to child component.
Q 13 What is Main Features ES6 and ES5
ES 6 Features
New Features in ES6
The let keyword
The const keyword
JavaScript Arrow Functions
JavaScript For/of
JavaScript Classes
JavaScript Promises
JavaScript Symbol
Default Parameters
Function Rest Parameter
Array.find()
Array.findIndex()
New Math Methods
New Number Properties
New Number Methods
New Global Methods
JavaScript Modules
ES5 Features
"use strict"
String.trim()
Array.isArray()
Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.reduceRight()
Array.every()
Array.some()
Array.indexOf()
Array.lastIndexOf()
JSON.parse()
JSON.stringify()
Date.now()
Property Getters and Setters
New Object Property Methods
Q 14 What is diffefferent Between == and === ?
== in JavaScript is used for comparing two variables, but it ignores the datatype of variable.
=== is used for comparing two variables, but this operator also checks datatype and compares two values.
Q 15 What is Box Model ?
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
Margin - Clears an area outside the border. The margin is transparent
Border - A border that goes around the padding and content
Padding - Clears an area around the content. The padding is transparent
Content - The content of the box, where text and images appear
The box model allows us to add a border around elements, and to define space between elements.
No comments:
Post a Comment