Angular

• About Angular
• Angular Versions
• Angular important concepts
• Install angular CLI using npm
• Create new angular project using angular CLI in CMD
• Install bootstrap in angular project
• Add Angular Files Extension to vs code
• Create component in angular
• angular routing example
• Data binding example in angular
• ngFor example in angular
• Nested ngFor example in angular
• Interpolation Binding example in angular
• Property Binding example in angular
• Event Binding example in angular
• Two Way Data Binding example in angular
• NgStyle example in angular
• NgClass example in angular
• ngIf example in angular
• ngIf-else example in angular
• ng-template example in angular
• Built-in Pipes example in angular
• Date format pipe example in angular
• ngSwitch example in angular
• Angular Module
• module example in angular
• Service in angular
• Service example in angular

Angular 7 & 8

By Google

TypeScript

Angular

·         Angular Versions

o   AngularJS (Angular 1)

o   Angular 2.0

o   Angular 4.0

o   Angular 5.0

o   Angular 6.0

o   Angular 7.0

o   Angular 8.0

o   Angular 9.0

·         Angular CLI

·         Single Page Application (SPA)

·         Angular Material and CDK

·         Install Angular

o   Node JS

o   NPM

o   Angular CLI

o   Visual Studio or VS Code (IDE for Code Editor)

·         Component

·         Modules

·         Data binding

o   One way data binding

o   Two way data binding

o   Property binding

·         Event Binding

·         Templates

·         Directives

o   Component directives

o   Structural directives

o   Attribute directives

o   Custom directives

·         Pipes

o   Custom pipe

·         Routing

·         Services

·         String interpolation

·         Bootstrap

o   Install Bootstrap

o   Configure in project

·         Angular 7 Architecture

·         Debugging Code in browser (Angular augury Tool)

·         Http Client

o   Get

o   Post

o   Put

o   Delete

·         CLI Command List

·         Forms

o   Template driven form

o   Model driven form

·         Data flow in Angular Forms

o   Data flow in Template driven forms

§  Data flow from view to model

§  Date flow from Model to View

o   Data flow in Reactive forms

§  Data flow from view to model

§  Date flow from model to view

·         Angular CURD

·         File Upload

·         Child component

·         Conditional rendering using ngIf

·         Emit & handle events

·         Input & Output

·         Master page

·         Lazy loading

·         Animation

·         Testing

To Install NPM

 PS D:\Test Projects\Angular> npm  install npm -g

To Check NPM Vertion

PS D:\Test Projects\Angular> npm -v

O/P: 6.5.0

To Install Angular CLI

PS D:\Test Projects\Angular> npm install -g @angular/cli

To Check Angular CLI Version

PS D:\Test Projects\Angular> ng –version

To Get Available Commands In NG

PS D:\Test Projects\Angular> ng –help

To Create Angular App

PS D:\Test Projects\Angular> ng new FirstAngularApp

To Start Angular App

PS D:\Test Projects\Angular\firstangularapp> ng serve --open

To Stop Running (angular App) Project Terminal

Ctrl + C

To Install Bootstrap in Project

PS D:\Test Projects\Angular\firstangularapp> npm install bootstrap –save

How to Apply Bootstrap to angular project

1)      Go to anguar.json file

2)      Find Style section

3)      Add below code

"styles": [

              "src/styles.css",

              "./node_modules/bootstrap/dist/css/bootstrap.css"

            ],

To Create New Component (Note Component name: NavBar): It will create new Component with .ts, .css, .html and other. Even this component will add in app.module.ts file also

PS D:\Test Projects\Angular\firstangularapp> ng g c NavBar

How to Import NgForm in App.Module.ts file

1)      Add below code in top

import { FormsModule }   from '@angular/forms';

2)      add NgForm in Imports section like below

imports: [

    BrowserModule,

    FormsModule

  ],

How to convert Html form to Angular Form

·         Add #loginForm=”ngForm” as below code

<form #loginForm="ngForm" >

            <input  type="text" placeholder="UserName" aria-label="Search">

            <input  type="password" placeholder="Password" aria-label="Search">

            <button  type="submit">Login</button>

 </form>

Access to xmlhttprequest at from origin has been blocked by cors policy in Angular 6

Go to Webapi project -> Web.Config file- > system.webServer Section & add below Code

<httpProtocol> 

    <customHeaders> 

     <add name="Access-Control-Allow-Origin" value="*" /> 

     <add name="Access-Control-Allow-Headers" value="Content-Type" /> 

     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 

    </customHeaders> 

  </httpProtocol>

Is it possible to run Chrome with and without web security at the same time?

Go to Run CMD & below script and enter it will open new chrome without security

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security