Angular 5

import { Component } from '@angular/core' ; @ Component ({ //metadata start selector: 'app-employee' , templateUrl: './employee.component.html' }) //metadata end export class EmployeeComponent {//abov comp decorator add metadata to empcompnt class firstName : string = "Mahesh" ; lastName : string = "vemudala" ; gender : string = "Male" ; age : string = "20" ; } html view <! DOCTYPE html > < html > < head > </ head > < body > < table > < tr > < td > firstName </ td > < td > {{firstName}} </ td > </ tr > < tr > < td > lastName </ td > < td > {{lastName}} </ td > </ tr > < tr > < td > gender </ td > < td > {{gender}} </ td > </ tr > < tr > < td > Age </ td > < td > {{age}...

TEMPLATE WITH SINGLE LINE CAN BE USED SINGLE OR DOUBLE QUOTES import { Component } from '@angular/core' ; @ Component ({ selector: 'app-root' , template: "hi {{title}}" }) export class AppComponent { title : string = 'angular' ; } TEMPLATE MORE THAN 1 LINE USED BACKTICKS import { Component } from '@angular/core' ; @ Component ({ selector: 'app-root' , template: `hi {{title}} ABC XYZ` }) export class AppComponent { title : string = 'angular' ; } USING TEMPLATEURL import { Component } from '@angular/core' ; @ Component ({ selector: 'app-root' , templateUrl: './app.component.html' }) export class AppComponent { title : string = 'angular' ; }

what is component in angular? A component in angular is a class with a template and a decorator .. in simple a componet in angular composed of template , class , decorator template defines the user interface, contains the HTMl, directives and data bindings class contains the code required for the template.. a class in ang contain properties and methods.. , properties contains data for the view template, methods contains logic for the view.. decoratator adds meta data to the class making it an angular component component decoretor provided by angular to use decorator we have to import from angular import { Component} from "@angular/core"; @Component({ selector:'myapp', tempalte:'xx';  //back ticks }) export class AppComponent{ / /export keyword allows this class to exported so other componets to imported and used   name: string ="Angular"; //property:datatype=value } import { Component } from '@angul...

Step 1 install node.js and npm to check version of node node -v if not installed show err node is not recognized as an internal or external command to checkk version of npm npm -v if not installed show err npm is not recognized as an internal or external command open windows command prompt  run msinfo32 // to check system hardware ram rom harddisk if not exist download  node and install download visual studio code to develop angular application typescript 2.2.0 or later is required npm install -g @angular/cli ng new my-dream-app cd my-dream-app ng serve to compile typescript to javascript when typescript files are saved set "compileOnSave" to  true in tsconfig.json file { "compileOnSave": true, ....... }