What is Angular https://angular.dev/overview javascripts framework for web development Single Page applocation (No Refresh on Clicks) development by Google Intro we need to install Node for angular Mvc architecture angular js and Angular different angular release on 14 -sep -2026 current version 19 why angular fast loading fast development Angular provide alot of features validation Library Routing Component bases structure large community What we will learn Setup ,structure,Basic,MCC,Component,Routing,TAsk ,Event ,Interview angular 19 Setup in Window install Node install Angular Cli Create Angular app Interview Question cmd node -v ,npm -v, npm i -g @angular/cli (for globaly install) check ng version cd .. (where you want) ng new angular-tur (For create new project) cd angular-tut (Your folder) ng server (Go live) code . (open vs code) visit https://angular.dev/tools/cli/setup-local#install-the-angular-cli first Change In Angular make First HTML Change Make First Change Make new properties(Variables) Interview Question file folder Details src/app/ app.Component.HTML (You can create html code ) app.Component.ts variable ,function ,properties(types scripts files) Notes: In this files any Class inside dont take any variable diretly but you can take variable inside function package.json (for package current Details and version like 19.2) Notes: dependencies and devDependencies different tsconfig.json tsconfig.app.json ==>extent tsconfig.json tsconfig.spec.json angular.json here is Project configration package-lock.json here is project pefect version like 19 node_modeles here is available all Library Details (npm install) Src/index.html here is application code (index.html file available) root file available Src/main.ts here first types scripts files(here is decide what ts Component run first) styles.css css files public image /icon INTERPOLATION IN Angular WHAT IS INTERPOLATION,EXAMPLE OF INTERPOLATION ,LIMITATION OF INTERPOLATION files app.Component.ts export class AppComponent { title = 'RUPESH angP-1'; name= "RUPESH KUMAR YADAV";} if You want show in app.Component.html files the use curlybracet <h3>{{name}}</h3> {{title}} ,{{2+2}} here--> Display Data from TS to Html files ,Execte js code in Html files,{{}},LIMITATION Intro end Topic Angular Cli what is angular CLi ,how to find all command,important command cli: angular cli(command line interface) is a tool that helps devepers create .bulit .test,and deploy angular application commands thats helps you to development angular application check for ng version ng generate component loginname check src app/login ng generate pipe testPipename check src/app ng help (showing all command) visit https://angular.dev/cli important command ng build,ng version,ng update,ng test,ng generate,ng server Topic Angular Component (commponet two types Normal and inline) An Angular component is a fundamental building block of Angular applications, encapsulating a portion of the user interface and its associated logic. It consists of three main parts: Template (HTML): Defines the structure and layout of the component's view. Class (TypeScript): Contains the logic, data, and methods that control the component's behavior. Metadata (@Component decorator): Provides information about the component, such as its selector, template, and styles create component ng generate component Componentname or short ng g c signup check src/app/yourcommonet : here is 4 files html,css,scpec.ts and ts ==>if you want called your commponet on server step 1 Go app.commponet.html here <app-login></app-login> or <login></login> (but You have change login.component.ts here selector remove app) notes This for callend and reuseable also step 2 Go app.commponet.ts here import Your component imports: [LoginComponent], the Go Your Browser See live make CUSTOM Component WHAT I MEAN FOR CUSTOM Component,MAKE FOLDER AND FILES FOR CUSTOM Component WRTIE CODE IN CUSTOM Component,ADD Template FILES IN CUSTOM Component CREATE CUSTOM Component CREATE FOLDER AND FILES folder profile and here 3 files profile.commponet.ts ,.html,.css (here write class and selector template import component) here : step 1 import { Component } from "@angular/core"; step 2 @Component({ step 3 selector:'app-profile', step 4 // inline component // template:`<h2 >Custom Profile component</h2>`, // styles:`h2{color:grey;text-align:center}` //Normal component templateUrl:'./profile.component.html', styleUrl:'./profile.component.css' }) step 5 export class ProfileComponent{ } Topic function call On Button Clicks make button.define a function,call function on button class.call function form other function html files create button <button (click)="handleclickEvent()"> Custom Buttom</button> app.commponet.ts files function defines this way // function for button inside export class AppComponent // function name(params:type) { } not this way handleclickEvent(){ alert("function-calll") this.otherFunction() // if call otherfn also }