Angular 5 features

-

 Angular5 Features:

1.Next version of angular4


2.AOT (Ahead of Time )Compiler made as default


3.Type checking even in templates

<input type="number">


4.More Flexible metadata and error messages got improved


5.Hybrid upgrade applications

@angular/core @latest


6.Build Optimizer

A build optimiser which removed unnecessary code from applications.

-It is tool which is included in CLI.

benefits:

- Remove addtional parts like spaces in components

- While runtime it remove decorators so that our final application size will be reduced 


7.Share application state between Serverside to client side 


8.Preserve white space 

@component{

selector:

preserveWhiteSpace:false;

}


9.i18N -Number date currency pipes


10.HttpCLient is smaller and easier

To update to HttpClient, you’ll need to replace HttpModule with HttpClientModule from @angular/common/http in each of your modules, inject the HttpClient service, and remove any map(res => res.json()) calls, which are no longer needed.


11.New Router Lifeevents

Ex: you can create progress displays that display when a route is changed.The corresponding events are ActivationStart and ActivationEnd or ChildActivationStart and ChildActivationEnd.

router.events

    // Event = RouteEvent | RouterEvent

    .filter(e => e instanceof RouteEvent)

    .subscribe(e => {

        if (e instanceof ActivationStart) {

            spinner.start();

        } else if (e instanceof ActivationEnd) {

            spinner.end()

        }

    });

12.cli V1.5


13.RXJS v5.5

import {map,filter} from 'rxjs/operators';


14.angular Forms added Update will be happen onBlur /OnSubmit

before:

<input type="text" name="fname" ngModel>

after:

<input name="fname" ngModel.[ngModelOptions]="{UpdateOn:'blur'}"/>


<form [ngFormOptions]={'updateOn':'blur'}


15.Reactive Forms

In reactive forms, the updateOn property is passed on in the parameter object when the FormControl is instantiated.


this.email = new FormControl(null, { updateOn: 'blur' });

If the validators are also specified, they are specified as properties of the parameter object:


this.email = new FormControl(null, {

  validators: Validators.required,

  updateOn: 'blur'

});

16.Replace the ReflectiveInjector with StaticInjector

Before


ReflectiveInjector.resolveAndCreate(providers);


After


Injector.create(providers);

Comments

Post a Comment

Popular posts from this blog

10 JS Interview Prep Coding Problems with solution

-
Image
  Q1.  Write a function called  sumRange . It will take a number and return the sum of all numbers from 1 up to the number passed in. output expected -  sumRange(3) returns 6 = 1+2+3 Q2.  Write a function called  power  which takes in a base and an exponent. If the exponent is 0, return 1. output expected -  console.log(power(2, 2)); // 4 console.log(power(2, 1)); // 2 console.log(power(2, 0)); // 1 Q3.  Write a function that returns the  factorial  of a number. As a quick refresher, a factorial of a number is the result of that number multiplied by the number before it, and the number before that number, and so on, until you reach 1. The factorial of 1 is just 1. output expected -  factorial(5); // 5 * 4 * 3 * 2 * 1 === 120 Q4.  Write a function called  all  which accepts an array and a callback and returns true if every value in the array returns true when passed as parameter to the callback function output expected - Q5.  Write a function called productOfArray which takes in an arr
Read more

JavaScript Data Types

-
Let's check the Data Types in JavaScript - Two Categories of Data Types: Primitive Data Types — These are immutable and cannot be modified after creation. a. String: let name = "JavaScript" ; // typeof(name) — 'string' b. Number: let age = 18 ; // typeof(age) — number c. BigInt: console . log ( 9007199254740991n + 1n ); // 9007199254740992n d. Boolean: let truth = false ; // typeof(truth) — boolean e. null: let age = null ; // null f. Undefined: let age; // undefined g. Symbol: let id = Symbol ( 'id' ); Non-Primitive Data Types — These are mutable and can be modified after creation. a. Object: var student = { firstName : "Hello" , lastName : "World" , age : 18 , height : 170 , fullName : function ( ) { return this . firstName + " " + this . lastName ; } }; b. Array: var colors = [ "red" , "green" , "blue" ]; c. Function: function greet ( name ) { return &
Read more

Optimizing Script Loading for Faster Website Performance

-
  Introduction: When it comes to website performance, the placement of <script> tags plays a crucial role in optimizing user experience. Understanding how browsers handle script loading can help enhance the speed at which your website loads. In this blog post, we'll explore the evolution of script placement recommendations and discuss modern approaches for efficient script loading. The Traditional Challenge: In the early days of web development, scripts positioned in the <head> tag could halt the entire parsing process, causing delays in rendering the page. This was particularly problematic when scripts manipulated the Document Object Model (DOM) during loading, requiring the parser to wait until the script was downloaded and executed. The Antiquated Recommendation: To mitigate this issue, an older recommendation was to place <script> tags at the bottom of the <body> . While this prevented the parser from being blocked until the end, it introduced a new
Read more