In Angular, Route Guards are interfaces that tell the router whether or not it should allow navigation to a specifically requested route. This decision is made by looking for a true or false value returned from a class implementing the given guard interface.
There are five different types of Route Guards in Angular and each of them is called in a particular sequence. The router’s behavior is altered as per the use of the specific guard. The guards:
* CanActivate
* CanActivateChild
* CanDeactivate
* CanLoad
* Resolve
To perform the multiple operations within the single expression the chaining Pipe is used. This chaining operation will be chained using the pipe (I). In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe.
In the following example –
{{ birthday | date | uppercase}}
The Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and many more things.
Changes of Angular 6 can be explored step by step:
Included ng update - This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.
This is the most asked Angular 6 Interview Question in an interview. The embedded view can be created by using the createdEmbeddedView method and can easily attach the same to the available DOM by using the specific utility of TemplateRef.
@Component({
selector: 'app-root',
template: `
<ng-template #template let-name='example'><div>{{…}}</ng-template>
})
export class ApplicationComponent implements AfterViewChecked {
@ViewChild('template1', { read: TemplateRef }) _template: TemplateRef<…>;
constructor() { }
ngAfterViewChecked() {
this.vc.createEmbeddedView(this._template1, {example: '….'});
}
}
In Angular, a template expression produces a value and appears within the double curly braces, {{ }}. Angular then executes the expression and assigns it to a property of the binding target; which could be an HTML element, a component, or a directive.
Data binding in Angular 6 is a means or method to communicate TypeScript code within your components and templates as seen by the end-user. This is mostly used in environments working with dynamic data on the server-side and a need to update it on the front end instantly.
There are four different types of Data BIding in Angular 6:
String Interpolation binding
Property Data Binding
Event Data Binding
Two-way Data binding
The Traceur compiler takes ES6 which incorporates generators, classes, generators, etc. and compiles it down to usual Javascript that runs easily with your browser.
Lazy loading is a process in Angular that allows you to load JavaScript elements asynchronously when an exclusive route is activated. This can add some early overall presentation for the period of the beginning load, especially if you have many factors with complex routing.
In order to upgrade angular-cli package that was installed globally in your system, you need to run following commands
npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
Instead of upgrading global version of angular-cli you can also upgrade the local version for specific project y running following commands:
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
In order to generate a module in Angular, cd to the current project directory and below command.
ng g module module_name
You can generate a component in specific module in AngularJs by running below commnad on CLI.
ng g component component_name --module=module_name
Service Worker is a script that runs in the web browser to manage the message caching for an application. It empowers the application to deliver user experience with reliability and performance that is on par with the natively-installed applications. It is one of the steps that turn an application into Progressive Web Applications. It also works as a network proxy. It intercepts all the outgoing HTTP requests by the application and chooses how to respond to them.
Bazel is a built tool introduced with the Angular 6 that is used extensively by Google. It is mainly used to optimize the angular compilation and improves the building and test on Angular apps.
The Closure in Angular JS is the combination of a function that is enclosed with references to its surrounding state. It gives you access to the outer scope of the function from an inner function. Closures are created in JavaScript every time a function is created at the creation time.
In Angular 2, the Safe navigation operator can be used to prevent errors while trying to access the object properties of non-existent objects.
Here’s an example explaining the above statement:
{{ phone?.number }}
This above line of code only evaluates the number when the phone is not null or undefined. This is very suitable in situations where a phone is something that is loading asynchronously.
Example
class PageTest {
public key = true;
}
@Component({
moduleId: module.id,
selector: 'elvis-test',
templateUrl: 'elvis-test.html'
})
export class ElvisTestComp {
@Input() elvisTest?: PageTest;
}
<div>{{elvisTest?.key}}</div>
* imports makes the exported declarations of other modules available in the current module
* declarations are to make directives (including components and pipes) from the current module available to other directives in the current module. Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.
* providers are to make services and values known to DI. They are added to the root scope and they are injected to other services or directives that have them as dependency.
Some benefits of HTTP client are:
* Requests and Response Interception
* Observable APIs and a system of streamlined and competent error handling
* Included Testability Features
* Typed Requests and reply Objects
Linting is an instrument that is used to ensure the Typescript code for programmatic and styling errors. A JSON file is a pattern for Linting, and this file contains all the non-payment guidelines for Linting.
A style function is used to state a key or precious object which contains CSS properties that shall be used in a cartoon state or sequence. It can be used within styling data for calls to alive and keyframes.
A DI token refers to Dependency Injection Token. It is a search for token linked with a dependency provider, to be utilized in the Dependency Injection system.
Host Listener in Angular 6 is a decorator which declares a DOM occasion to listen for and also give a handler process to run if and when that exact event occurs. Host Listener is a set of influence that is used to bypass the handler process when an event occurs.
There are three case types in Angular 6:
Lower case pipe
Title case pipe
Upper case pipe
In order to improve angular-CLI package that was installed worldwide in your system, you need to sprint the following commands:
npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
Instead of upgrading the global version of angular-CLI, you can also upgrade the local version for specific project y running following commands:
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install
You can make a component in the precise module in AngularJs by in a row below command on CLI.
(ng g component name --module=module name)
Due to a merge of code in the machinery and the templates, integrating them needs a compiler. Hence, in Angular 6, a compiler is used.
In Angular 6, Multicasting is the process of distribution of multiple subscribers within a single implementation to send values out to attain each subscriber.
Reactive Extensions for JavaScript is used in Angular 6 as a hasty streams library which permits you to work ahead asynchronous data streams. It can be utilized on the browser and server-side.
In Angular 6 the subscriber is used as a process in the Observable type. This is a kind that is used as the usefulness for asynchronously and synchronously streaming data to a diversity of machines that have been subscribed to the evident.
Material Design in Angular 6 is an open-source structure. It helps in increasing many material designs to be used in mobile and profitable applications. The main reason for Material Design in Angular is to give an incorporated and seamless, which included visual, motion and interactive designs available on multiple platforms.
ngZone is nothing but one of the wrappers of the JS file called Zone.js. This is one of the key libraries which is using for creating some context on using varieties asynchronous functions to make them trackable properly. Angular always dependent on zones for detect changing.
AOT stands for ahead of time. It is using by the angular for precompiling all the angular components and available templates at the time of build process. AOT always launched in angular based application than others.
BrowserModule – The browser module is imported from @angular/platform-browser and it is used when you want to run your application in a browser.
CommonModule – The common module is imported from @angular/common and it is used when you want to use directives - NgIf, NgFor and so on.
FormsModule – The forms module is imported from @angular/forms and it is used when you build template driven forms.
RouterModule – The router module is imported from @angular/router and is used for routing RouterLink, forRoot, and forChild.
HttpClientModule –The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and easy to use the alternative of HTTP.
To detect router alters in Angular 6, the $on() technique is used. It is an event trainer used to grip $routeChangeSuccess when triggered by a route change.
Angular can assume one platform and browser is using for rendering the details fetching data from the platform. Now if angular is going to use some of the native element of Angular DOM’s, then those elements only can be used for the application of same DOM environment. In angular 6, one new class has come call Render2, which helps of preparing that native element like and web component element so that it can be used anywhere avoiding DOM dependency.
The AOT compiler converts HTML and Typescript code into an atmosphere friendly JavaScript code during the construct section earlier than the browser downloads and runs that code. Compiling your application in the route of the build procedure gives a quicker rendering in the browser.The AOT compiler converts HTML and Typescript code into an atmosphere friendly JavaScript code during the construct section earlier than the browser downloads and runs that code. Compiling your application in the route of the build procedure gives a quicker rendering in the browser.
These are Angular components that take the minified account of the whole framework. Angular elements also permit users to make custom elements in a framework-doubter way. These elements can be used in easy web projects but with influential features of Angular within.
The chaining Pipe is used to perform the multiple operations within the single expression. This chaining operation will be chained using the pipe (I).
In the following example, to display the birthday in the upper case- will need to use the inbuilt date-pipe and upper-case-pipe.
In the following example –
{{ birthday | date | uppercase}}
A pipe can accept any number of optional parameters to achieve output. The parameter value can be any valid template expressions. To add optional parameters follow the pipe name with a colon (:). Its looks like- currency: 'INR'
In the following example –
<h2>The birthday is - {{ birthday | date:"MM/dd/yy" }} </h2>
<!-- Output - The birthday is - 10/03/1984 -->
Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.
If you want to make a pipe impure that time you will allow the setting pure flag to false.
@Pipe({
name: 'currency',
pure:false
})
Angular executes a pure pipe only when it detects a pure change to the input value. A pure change can be primitive or non-primitive.
Primitive data are only single values, they have not special capabilities and the non-primitive data types are used to store the group of values.
@Pipe({
name: 'currency'
})
A cookie is a small piece of data sent from a website and stored on the user's machine by the user's web browsers while the user is browsing.
There are four types of NgModules –
> Features Module
> Routing Module
> Service Module
> Widget Module
> Shared Module
The NgModule decorator identifies AppModule as a NgModule class.
The NgModule takes a metadata object that tells Angular how to compile and launch the application.
The NgModule importance metadata properties are as follows –
* providers
* declarations
* imports
* exports
* entryComponents
* bootstrap
* schemas
* id
The Angular Team are working on lots of bug fixes, new features and added/update/remove/ re-introduce/ and many more things.
Let’s start to explore all changes of Angular 6 step by step:
Added ng update - This CLI commands will update your angular project dependencies to their latest versions. The ng update is normal package manager tools to identify and update other dependencies.
The Concepts of Angular Components -
Components are the most basic building block of a UI in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to bring functionality to your applications.
Technically components are basically TypeScript classes that interact with the HTML files of the components, which get displayed on the browsers.
The component is the core functionality of Angular applications but you need to know to pass the data into the components to configure them.
The Angular Ahead-of-Time compiler pre-compiles application components and their templates during the build process. Apps compiled with AOT launch faster for several reasons.
Application components execute immediately, without client-side compilation.
Templates are embedded as code within their components so there is no client-side
request for template files.
You don't download the Angular compiler, which is pretty big on its own.
The compiler discards unused Angular directives that a tree-shaking tool can then exclude.
A filter is used in Angular 6 to help change data through the UI without changing its format.
Here are the different types of filters in Angular 6:-
Number: Used to format numeric data as text separated with commas and also fractions.
Currency Filter: A specific data value can be specified in a particular currency format and fractions.
Date: Used to format dates in a string as per different date formats.
Uppercase: Converts string to upper case.
Lowercase: Converts string to lower case.
Filter Type: Filters an array based on a particular criterion and returns a new array.
orderBy: Used to sort an array as per a particular predicate expression.
JSON: Converts JavaScript object into a JSON string
limitTo: Returns a new array containing the specified number of elements from an existing array.
Angular 6 is almost the same as its previous version, but with few improvements. Projects developed in Angular 5 will easily support Angular 6.
Few of the crucial features that have been added to the newest version are:
* The support for TypeScript 2.7+
* Addition of elements
* Component Development Kit with stable Angular material
* Bazel compiler
* Ivy renderer
* Addition of restoredState and navigationSource to NavigationStart
* NgModelChange event
* Addition of multiple validators for FormBuilder’s array method
* CLI 1.7 support and its feature addition
* Update for ng
Codelyzer is a tool used for static analysis of the Angular TypeScript projects. This tool sits on the top of TSLint and checks if the Angular TypeScript projects follow the set of linting rules. It has over 50 rules to check the Angular projects. You can add this tool using the npm package manager to your project. This tool can be used to run the static code analyzer over web apps, native script, ionic, etc.
The fork-join operator is used when you need to wait for multiple HTTP requests to be resolved. It groups all the observables returned by each HTTP call into a single observable array. Finally, it returns the observable array.
The BehaviorSubject is used to hold the values that are to be shared with other components. You can subscribe to data with the BehaviorSubject that needs to be shared with other components.
You can subscribe to the data using the Behavior Subject service as the following.
//inject service into a component
dataService.data.subscribe(data => {
//do whatever needs doing when data changes
})
//update the value of data in the service
dataService.updateData(newData);