Scribd
Upload
60 views3 pages

Generate A New Component: NPN Install - G @angular/cli@latest

The document provides instructions for installing Angular CLI, creating an Angular project, starting a web service, generating components, defining routes, handling events, displaying dynamic values, and adding components to the main HTML file. Key steps include using npm to install Angular CLI, using the ng command-line interface to generate projects, components, routes, and start the dev server, binding click events to call component methods, displaying dynamic text values from the component class, and using component selectors in templates.

Uploaded by

Waqas Mirza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
60 views3 pages

Generate A New Component: NPN Install - G @angular/cli@latest

The document provides instructions for installing Angular CLI, creating an Angular project, starting a web service, generating components, defining routes, handling events, displaying dynamic values, and adding components to the main HTML file. Key steps include using npm to install Angular CLI, using the ng command-line interface to generate projects, components, routes, and start the dev server, binding click events to call component methods, displaying dynamic text values from the component class, and using component selectors in templates.

Uploaded by

Waqas Mirza
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

To Install Angular CLI

Npn install –g @angular/cli@latest

Ng version will give you version

Install Angular Project


Ng new project_folder_name

To Start Angular Web Service


Ng serve

Generate a new component


ng generate component component_name

short version

ng g c component_name

Define a route

Go to app-routing.modules.ts

Import component

import { HomeComponent } from './home/home.component';

define path

const routes: Routes = [


{ path : "", component : HomeComponent}
];
Event Binding

Write event in a component html

<button (click)="justClick()">Click Me</button>

Define event/method in component’s ts file in class

justClick(){
console.log("hello world");
}

Dynamic Values
In HTML file

<a routerLink="/" class="logo">{{ appTitle }}</a>


In class

appTitle : string = "wishdd";

Add components to Main HTML


Use selector from component class and use it as wrapper

From class

selector: 'app-nav',

in app.component.html

<app-nav></app-nav>

You might also like