Skip to main content

What Are The New Features Of Angular 2? Why You Used Angular 2?

Angular 2 Features –
·       Angular 2 is Entirely Component Based
·       Directives
·       Dependency Injection
·       Used of TypeScript
·       Used of Lambdas or Arrow functions
·       Generics
·       Forms and Validations
·       And So on.....

 Component Based- It is entirely component based. It is not used to scope and controllers and Angular 2 are fully replaced by components and directives.

Directives- The directive can be declared as @Directive annotation.
A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template oriented features.

Dependency Injection- Dependency Injection is a powerful pattern for managing code dependencies. There are more opportunities for component and object based to improve the dependency injection.

Use of TypeScript- Type represents the different types of values which are using in the programming languages and it checks the validity of the supplied values before they are manipulated by your programs.

Generics- TypeScript has generics which can be used in the front-end development.

Lambdas and Arrow functions – In the TypeScript, lambdas/ arrow functions are available. The arrow function is additional feature in typescript and it is also known as a lambda function.

Forms and Validations- Angular 2 forms and validations are an important aspect of front-end development.





Why You Used Angular 2?
1.     It is entirely component based.
2.     Better change detection
3.     Angular2 has better performance.
4.     Angular2 has more powerful template system.
5.     Angular2 provide simpler APIs, lazy loading and easier to application debugging.
6.     Angular2 much more testable
7.     Angular2 provides to nested level components.
8.     Ahead of Time compilation (AOT) improves rendering speed
9.     Angular2 execute run more than two programs at the same time.
10.  Angular1 is controllers and $scope based but Angular2 is component based.
11.  The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.
12.  In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngFor loop Example.
13.  TypeScript can be used for developing Angular 2 applications
14.  Better syntax and application structure

TypeScript Q/A

What are Types in TypeScript? Why should I use Typescript?
How to Setup and Install Typescript? What are TypeScript Advantages- Pros and Cons?
What is Variable in TypeScript? How to Declare? What is an Interface in TypeScript?
What is Optional Properties in TypeScript? What is Functions in TypeScript? How many types you defined?
What is the Default Parameters Function? What is Anonymous Functions?
What is Named Function? What is Optional Parameters Function?
What is Lambda/Arrow Functions?
What is Rest Parameters Functions? How to create fields, constructor and function in TypeScript Class?
What are TypeScript Public, Private, Protected and Readonly Modifiers? What are Method Overriding in TypeScript?
What is Inheritance in TypeScript? How Automatic Assignment of Constructor Parameters in TypeScript work?
What are TypeScript Modules? and Types? What’s an Internal Module?
What is an External Modules? What's an export in TypeScript?Why we use it?
What is default export in TypeScript? Why we use it? Export vs. Default Exports
How to declare a nest class structure in typescript? Module vs. Namespace

Labels

Labels:
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVA...
Read more

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...
Read more

Angular 8, 7, 6, 5, 4, 2 - Open and Close Modal Popup Using Typescript and Bootstrap

How to Create a Modal Popup for Angular? Two ways to CREAT Modal Popup Window - 1.       Modal Popup using Typescript and Bootstrap 2.       Modal Popup using Angular Material Dialogue Open Modal Popup Using Typescript and Bootstrap – Download and use the Bootstrap CDN to deliver Bootstrap's compiled CSS and JS to your project. Steps 1 – Add Bootstrap CSS and Js files in the AppComponent.HTML file. < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"   crossorigin = "anonymous" > < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"   crossorigin = "anonymous" ></ script > You can also Install Bootstrap from NPM – npm install bootstrap – save Steps 2 – Add Style CSS for Login and Popup validations and it looks like. .ng-valid[ required ], .ng-valid.required   {  ...
Read more

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from ...
Read more

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin...
Read more