Angular Commands

Angular
Each application consists of Components. Each component is a

logical boundary of functionality for the application. You need to
have layered services, which are used to share the functionality
across components.
Following is the anatomy of a Component. A component consists

of −
 Class − This is like a C++ or Java class which consists of

properties and methods.
 Metadata − This is used to decorate the class and extend the
functionality of the class.
 Template − This is used to define the HTML view which is
displayed in the application.
Component
Components are a logical piece of code for Angular JS application.

A Component consists of the following −
 Template − This is used to render the view for the

application. This contains the HTML that needs to be
rendered in the application. This part also includes the
binding and directives.
 Class − This is like a class defined in any language such as
C. This contains properties and methods. This has the code
which is used to support the view. It is defined in
TypeScript.
 Metadata − This has the extra data defined for the Angular
class. It is defined with a decorator.
Let’s now go to the app.component.ts file and create our first

Angular component.
Let’s add the following code to the file and look at each aspect in
detail.
Class
The class decorator. The class is defined in TypeScript. The class
normally has the following syntax in TypeScript.
Syntax
class classname {
Propertyname: PropertyType = Value
}
Parameters
 Classname − This is the name to be given to the class.

 Propertyname − This is the name to be given to the property.
 PropertyType − Since TypeScript is strongly typed, you need
to give a type to the property.
 Value − This is the value to be given to the property.
Example
export class AppComponent {

appTitle: string = 'Welcome';
}
In the example, the following things need to be noted −
 We are defining a class called AppComponent.

 The export keyword is used so that the component can be
used in other modules in the Angular JS application.
 appTitle is the name of the property.
 The property is given the type of string.
 The property is given a value of ‘Welcome’.
Template
This is the view which needs to be rendered in the application.
Syntax
Template: '
<HTML code>
class properties
'
Parameters
 HTML Code − This is the HTML code which needs to be

rendered in the application.
 Class properties − These are the properties of the class which
can be referenced in the template.
Example
template: '
<div>
<h1>{{appTitle}}</h1>
<div>To Tutorials Point</div>
</div>
'
In the example, the following things need to be noted −
 We are defining the HTML code which will be rendered in our

application
 We are also referencing the appTitle property from our
class.
Metadata
This is used to decorate Angular JS class with additional
information.
Let’s take a look at the completed code with our class, template,
and metadata.
Example
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
</div> `,
})

}
In the above example, the following things need to be noted −
 We are using the import keyword to import the ‘Component’

decorator from the angular/core module.
 We are then using the decorator to define a component.
 The component has a selector called ‘my-app’. This is
nothing but our custom html tag which can be used in our
main html page.
Now, let’s go to our index.html file in our code.

Let’s make sure that the body tag now contains a reference to
our custom tag in the component. Thus in the above case, we
need to make sure that the body tag contains the following code
−
<body>
<my-app></my-app>
</body>
Output
Now if we go to the browser and see the output, we will see that
the output is rendered as it is in the component.
Template
n the chapter on Components, we have already seen an example

of the following template.
template: '
<div>
</div>
'
This is known as an inline template. There are other ways to define
a template and that can be done via the templateURL command.
The simplest way to use this in the component is as follows.
Syntax
templateURL:
viewname.component.html
Parameters
 viewname − This is the name of the app component module.
After the viewname, the component needs to be added to the file

name.
Following are the steps to define an inline template.
Step 1 − Create a file called app.component.html. This will contain

the html code for the view.
Step 2 − Add the following code in the above created file.
<div>{{appTitle}} Tutorialspoint </div>
This defines a simple div tag and references the appTitle property
from the app.component class.
Step 3 − In the app.component.ts file, add the following code.

@Component ({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})

}
From the above code, the only change that can be noted is from
the templateURL, which gives the link to the app.component.html
file which is located in the app folder.
Step 4 − Run the code in the browser, you will get the following
output.
From the output, it can be seen that the template file

(app.component.html) file is being called accordingly.
1. Install Node Js
2. Angular, the Angular CLI, and Angular applications depend on npm packages for many features and
functions, Check version npm -v
3. Install CLI npm install -g @angular/cli
npm install bootstrap

npm install jquery
ng version
4. Create new app environment ng new my-app
5. Navigate to the workspace folder, such as my-app.
cd my-app
ng serve --open
The ng serve command launches the server, watches your files, and rebuilds the app as you make
changes to those files.
The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
App- app.component.html
Package.json- Name, Verson, Script, Libraries

Dataand
Node module- Contains all libraries Binding
always rebuild with each
npm install command
Types of data binding
Src- app component contains files
Angular provides three categories of data binding according to the direction of data flow:
Assests- extra images
app.component.ts (type script)
Environment-use for advance level. To deploy project on internet, set up environment for
 One-way from data source to view target- Use [] to bind from source to view
 One-way from view target to data source- Use () to bind from view to source
 In a two-way sequence of view to source to view- Use [()] to bind in a two-way
sequence of view to source to view
Wishcartproject-
Data Binding-One-way from data source to view target with
Array []
1. Create new project- ng new wishcartproject. The list of cart would be shared across
the application
2. Go to app.component.ts import common module and Add items array in export class
AppComponent

import { RouterOutlet } from '@angular/router';
import {CommonModule} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
standalone: true,
imports: [
CommonModule,
],
})

title = 'wishcartproject';
friendslist = [
{name: 'Nishant',
age: 25},
{name: 'Shailesh',
age: 45},
{name: 'Abhishek',
age: 36},
{name: 'Akshay',
age: 65},
{name: 'Ashish',
age: 12},]
}
3. Go to index.html add stylesheet (optional)
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
4. Go to app.component.html delete everything and access friend list
<ul>
<li *ngFor="let frnd of friendslist">
{{ frnd.name }} {{ frnd.age }}
</li>
</</ul>
Output

Class Array []
1. Create new project- ng new wishcartproject. The list of cart would be shared across
the application
2. Create folder under src-Shared; under shared-models; create ts file under models-
Listitems.ts
3. In Listitems.ts-Create a class to export it with two attributes using constructor
export class ListItem{

constructor(public listtext:string, public isSelected:boolean
=false){
}}
4. Go to app.component.ts import ListItem class, common module and Add items array
in export class AppComponent

import { ListItem} from '../shared/models/listitems';
@Component({
templateUrl: './app.component.html',
styleUrl: './app.component.css',
standalone: true,
imports: [
CommonModule,
],
})

items=[
new ListItem('Coffee'),
new ListItem('Tea', true),
new ListItem('Green Tea'),
new ListItem('Milk Shake'),
]
}
5. Go to index.html add stylesheet
6. Go to app.component.html delete everything and access listitems

https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class = "container">
<div>
{{items[0].listtext}}
</div>
</div>
OR USE FOR LOOP FOR ACCESSING THE ARRAY
<div>
<ul class="Cart-Item">
<li *ngFor="let item of items">
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox"> {{item.listtext}}
</label>
</div>
<li>
</ul>
</div>
Output
Handle Data using If -Else Do the following two changes

app.component.html
<div class="container">
<div *ngIf="items.length==0; then noItems else showItems">
</div>
<ng-template #noItems>
There is no items to display
</ng-template>
<ng-template #showItems>
<ul class="Cart-Items">
<li *ngFor="let item of items">
app.component.ts change class AppComponent

items=[
new ListItem('Milk Shake')];
//items : ListItem[]= [];

}
Output
Wishcartproject-
Class Attribute & Properties []
app.component.html
</div>
<ng-template #noItems>
Output
Wishcartproject-
Data Binding-One-way from view target to data source with
Event Binding () (Property Binding)
app.component.html

items=[
Output
Wishcartproject-
Data Binding-Two-way sequence of view to source to view
with Event Binding [()]
app.component.html
<form class="row mt-3 gx-3 gy-2 align-items-center justify-control-

center" name="f1">
<div class="col-sa-6">

import { ListItem} from '../shared/models/listitems';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
Output

Angular Commands

Uploaded by

Copyright:

Available Formats

Angular Commands

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Commands

Uploaded by

Copyright:

Available Formats

Angular

Each application consists of Components. Each component is a

Following is the anatomy of a Component. A component consists

 Class − This is like a C++ or Java class which consists of

Components are a logical piece of code for Angular JS application.

 Template − This is used to render the view for the

Let’s now go to the app.component.ts file and create our first

 Classname − This is the name to be given to the class.

export class AppComponent {

In the example, the following things need to be noted −

 We are defining a class called AppComponent.

 HTML Code − This is the HTML code which needs to be

In the example, the following things need to be noted −

 We are defining the HTML code which will be rendered in our

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

export class AppComponent {

In the above example, the following things need to be noted −

 We are using the import keyword to import the ‘Component’

Now, let’s go to our index.html file in our code.

n the chapter on Components, we have already seen an example

After the viewname, the component needs to be added to the file

Following are the steps to define an inline template.

Step 1 − Create a file called app.component.html. This will contain

Step 3 − In the app.component.ts file, add the following code.

export class AppComponent {

From the output, it can be seen that the template file

3. Install CLI npm install -g @angular/cli

npm install bootstrap

4. Create new app environment ng new my-app

5. Navigate to the workspace folder, such as my-app.

Package.json- Name, Verson, Script, Libraries

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

export class AppComponent {

3. Go to index.html add stylesheet (optional)

Data Binding-One-way from data source to view target with

export class ListItem{

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

export class AppComponent {

5. Go to index.html add stylesheet

6. Go to app.component.html delete everything and access listitems

Handle Data using If -Else Do the following two changes

export class AppComponent {

//items : ListItem[]= [];

export class AppComponent {

<form class="row mt-3 gx-3 gy-2 align-items-center justify-control-

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

You might also like