Scribd
Upload
35 views

Angular Component: Building Blocks of A Component

This document discusses Angular components, which are the building blocks of Angular applications. Components consist of a template, class, and metadata. The template defines the user interface, the class defines functionality, and the metadata binds them together. Components are registered in modules and can then be placed in templates using their selector. The document provides the syntax for creating a simple component class, template, and metadata. It also explains how to register the component in a module and render it in the application.

Uploaded by

Jay Kodam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Angular Component: Building Blocks of A Component

This document discusses Angular components, which are the building blocks of Angular applications. Components consist of a template, class, and metadata. The template defines the user interface, the class defines functionality, and the metadata binds them together. Components are registered in modules and can then be placed in templates using their selector. The document provides the syntax for creating a simple component class, template, and metadata. It also explains how to register the component in a module and render it in the application.

Uploaded by

Jay Kodam
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

AngularComponent.

md 10/2/2018

Angular Component
Angular follows a clean modular architecture . A complex Angular web application user interface can be
divided as- .

MODULES : are the basic building blocks in an angular application .Modules logically group one or
more components and provide a compilation context for it.

COMPONENTS : represent building blocks for UI

SERVICES : used to share data and logic between components

This chapter discusses how to create and use components in an Angular 6 application.

Angular splits complex application UI into reusable components . So we can think of an angular application as
nothing but a bunch of components as shown in the diagram below.Every angular application must have at
least one component .Components work together in harmony to provide great user experience.

Building blocks of a Component


A component itself is made up of three pieces

1/4
AngularComponent.md 10/2/2018

1. Template :is created using HTML. It acts an interface to accept user input.
2. Class :is created with Typescript.This defines the functionality of a component. It exposes methods and
properties of a component.
3. Metadata:It binds a template with a class. It is created using decorator function.We will use
@Component() decorator

Syntax to create a component


Create a class in typescript and add properties .Following shows a class
TutsTeacherHelloComponent.ts and a property message.The class should be exported so that it
becomes public and can be accessed by other classes in the application.

export class TutsTeacherHelloComponent {

message:String;
constructor(){
this.message = "TutorialsTeacher says ,Welcome to Angular6 Components "
}
}

Create a template file TutsTeacherHelloComponent.html. The h1 tag embeds the value of the
message property in the TutsTeacherHelloComponent class.

<section>
<h1>{{message}}</h1>
</section>

Add metadata to the class created . The decorator function @Component() is used to bind the
template and the class.

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

@Component({
2/4
AngularComponent.md 10/2/2018

templateUrl:'TutsTeacherHelloComponent.html',
selector:'tt-hello'
})
export class TutsTeacherHelloComponent {

message:String;
constructor(){
this.message = "TutorialsTeacher says ,Welcome to Angular6 Components "
}
}

The @Component() function takes in an object {} as parameter . The common properties of the object is
shown below

Sr
Property Description
No

The URL of a template file for an Angular component. If provided, do not supply an
1 templateUrl
inline template using template.

The CSS selector that identifies this directive in a template and triggers instantiation
2 selector
of the directive

3 styleUrls One or more URLs for files containing CSS stylesheets to use in this component

An inline template for an Angular component. If provided, do not supply a template


4 template
file using templateUrl.

5 styles One or more inline CSS stylesheets to use in this component.

Register the Component in AppModule and Execute the App


Register the created component TutsTeacherHelloComponent in the AppModule (created by the
Angular CLI) of the project as given below

import { BrowserModule } from '@angular/platform-browser';


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

//import the component created


import { TutsTeacherHelloComponent } from
'../TutorialsTeacher/TutsTeacherHelloComponent';

@NgModule({
declarations: [
TutsTeacherHelloComponent // register here
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [TutsTeacherHelloComponent] //modify here

3/4
AngularComponent.md 10/2/2018

})
export class AppModule { }

The TutsTeacherHelloComponent is root component of the module.

The Angular CLI creates an index.html page . To execute and view how the component looks in the
browser .We need to use the selector tt-hello in index.html as below.

<body>
<tt-hello></tt-hello>
</body>

Finally run the application with angular cli use ng serve command .Open the browser type url
http://localhost:4200/ and verify the output as below.

4/4

You might also like