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

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...

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 ...

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'. Follow the below steps, Steps 1 – Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like – NPM Command 1 -> npm install crypto-js --save NPM Command 2 -> npm install @types/crypto-js --save Steps 2 - Add the script path in “ angular.json ” file. "scripts" : [ "../node_modules/crypto-js/crypto-js.js" ] Steps 3 – Create a service class “ EncrDecrService ” for encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using encrypt and decrypt get/set methods . import { Injectable } from ...

How To convert JSON Object to String?

To convert JSON Object to String - To convert JSON Object to String in JavaScript using “JSON.stringify()”. Example – let myObject =[ 'A' , 'B' , 'C' , 'D' ] JSON . stringify ( myObject ); ü Stayed Informed – Object Oriented JavaScript Interview Questions I hope you are enjoying with this post! Please share with you friends!! Thank you!!!

Cache Busting with Angular and Angular CLI

Cache Busting - Run the below command in your project directory - ng build -- prod The above command is used to enable cache busting by default with Angular CLI. This command can take a few minutes based on your project size. Stayed Informed – Angular 4 and Angular 5 Documents Steps for Cache busting with Angular and Angular CLI - · C:\Users\Viaindia>d: · D:\>cd Angular · D:\Angular>cd PipeApps · D:\Angular\PipeApps>ng serve --open ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 10% building modules 8/10 modules 2 active ...e}!D:\Angular\PipeApps\src\styles.csswebpack: wait until bundle finished: / ...

Anil Singh | Code-sample.com

Search This Blog