Scribd
Upload
22 views

4 Introduction-To-Components-Slides

Components are the building blocks of an Angular application. A component consists of a class, metadata, a template, and styles. The class contains the logic, the metadata defines the selector and template, and the template contains the HTML markup. To create a component, we define a class, apply the @Component decorator to provide metadata, import required symbols, and bootstrap the main component. This allows Angular to render the template HTML and bind to properties and methods in the class.

Uploaded by

sakshi garg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

4 Introduction-To-Components-Slides

Components are the building blocks of an Angular application. A component consists of a class, metadata, a template, and styles. The class contains the logic, the metadata defines the selector and template, and the template contains the HTML markup. To create a component, we define a class, apply the @Component decorator to provide metadata, import required symbols, and bootstrap the main component. This allows Angular to render the template HTML and bind to properties and methods in the class.

Uploaded by

sakshi garg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

Introduction to Components

Module
Overview What Is a Component?
Creating the Component Class
Defining the Metadata with a Decorator
Importing What We Need
Bootstrapping Our App Component
Application Architecture
Welcome
Component

App Product List


index.html
Component Component
Star
Component
Product Detail
Product Data Component
Service
What Is a Component?

Class

= + +
Properties
Component Template Metadata

Methods

• View layout • Code supporting • Extra data for


• Created with HTML the view Angular
• Includes binding • Created with • Defined with a
and directives TypeScript decorator
• Properties: data
• Methods: logic
Component
app.component.ts Import
import { Component } from '@angular/core';

@Component({
selector: 'pm-root',
template: `
<div><h1>{{pageTitle}}</h1> Metadata &
<div>My First Component</div> Template
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management'; Class
}
Creating the Component Class
app.component.ts
app.component.ts

export class AppComponent {


pageTitle: string = 'Acme Product Management';
}

class
Class Name
keyword

export Component Name


keyword when used in code
Creating the Component Class
app.component.ts

export class AppComponent {


pageTitle: string = 'Acme Product Management';
}

Property Default
Data Type
Name Value

Methods
Defining the Metadata
app.component.ts

@Component({
selector: 'pm-root',
template: `
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
Decorator
A function that adds metadata to a class, its members, or its
method arguments.
Prefixed with an @.
Angular provides built-in decorators.

@Component()
Defining the Metadata
app.component.ts
Component
@Component({
decorator
selector: 'pm-root',
template: ` Directive Name
<div><h1>{{pageTitle}}</h1> used in HTML
<div>My First Component</div>
</div>
` View Layout
})
export class AppComponent {
pageTitle: string = 'Acme Product Management'; Binding
}
Importing What We Need

Before we use an external function or class,


we define where to find it
import statement
import allows us to use exported members
from external ES modules
Import from a third-party library, our own
ES modules, or from Angular
Angular Is Modular

@angular/ @angular/ @angular/ @angular/


core animate http router

https://www.npmjs.com/~angular
Importing What We Need
app.component.ts

@Component({
selector: 'pm-root',
template: `
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
Importing What We Need
app.component.ts
import { Component } from '@angular/core'; import keyword

@Component({ Angular library


selector: 'pm-root', module name
template: `
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div> Member name
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
Completed Component
app.component.ts
import { Component } from '@angular/core';

@Component({
selector: 'pm-root',
template: `
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
Demo

Creating the App Component


Bootstrapping Our App Component

Host the application


Defining the Angular module
Single Page Application (SPA)

index.html contains the main page for the


application
This is often the only Web page of the
application
Hence an Angular application is often
called a Single Page Application (SPA)
Hosting the Application

index.html app.component.ts
<body> import { Component } from '@angular/core';
<pm-root></pm-root>
</body> @Component({
selector: 'pm-root',
template: `
<div><h1>{{pageTitle}}</h1>
<div>My First Component</div>
</div>
`
})
export class AppComponent {
pageTitle: string = 'Acme Product Management';
}
BrowserModule

Organization
AppModule Boundaries
Template resolution
environment
AppComponent

Imports
Exports
Declarations
Providers
Bootstrap
Defining the Angular Module
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Demo
Bootstrapping Our
App Component
Component Checklist

Class -> Code


Decorator -> Metadata
Import what we need
Component Checklist: Class
Clear name
- Use PascalCasing
- Append "Component" to the name

export keyword
Data in properties
- Appropriate data type
- Appropriate default value
- camelCase with first letter lowercase

Logic in methods
- camelCase with first letter lowercase
Component Checklist: Metadata

Component decorator
- Prefix with @; Suffix with ()

selector: Component name in HTML


- Prefix for clarity

template: View's HTML


- Correct HTML syntax
Component Checklist: Import

Defines where to find the members that


this component needs
import keyword
Member name
- Correct spelling/casing

Module path
- Enclose in quotes
- Correct spelling/casing
Something's Wrong! Checklist

F12 is your friend


Recheck your code
- HTML
• Close tags
• Angular directives are case sensitive
- TypeScript
• Close braces
• TypeScript is case sensitive
Summary What Is a Component?
Creating the Component Class
Defining the Metadata with a Decorator
Importing What We Need
Hosting Our App Component
Application Architecture
Welcome
Component

App Product List


index.html
Component Component
Star
Component
Product Detail
Product Data Component
Service

You might also like