Steps for Angular App

Step1 : create a directory AngularApp
Step 2: cd AngularApp
step 3: git clone https://github.com/angular/quickstart.git frontend    THIS will clone angular to Frontend folder
step 4: open Frontend folder through VSCode
setp 5: view --Integrated Terminal --
npm install
npm start

You will see hello angular

step 6: File Preferences--settings add

{
"files.autoSave": "afterDelay",
"files.exclude": {
"**/*.js.map": true,
"**/*js":{"when":"$(basename).ts"}
}
}

step 7: Add a Component

Add the dependecies of the component in appmodule (imports and also in declarations)
also import the message component in appcomponent
and use the selector of the messagecomponent in appcomponent like below

AppModule


import { MessagesComponent } from './messages-component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent,MessagesComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

AppComonent

import { MessagesComponent } from './messages-component';
import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1><messages></messages>`,
})
export class AppComponent { name = 'World'; }


MessageComponent


import { Component } from '@angular/core';

@Component(
{
selector:'messages',
template:"Hello this is a message template"
}
)

export class MessagesComponent {}

Comments

Popular posts from this blog