Angular 8 Session 4: Components In Angular

Components In Angular

In the world of Angular everything is a component. It is the logical block or building block of an Angular application.

A component must have the following things:

Template- This part is the UI/View part of an angular component contains direct HTML or a .html file to load the user interface. It has bindings, directives etc…

Class- It is just like any Object-Oriented Programming Language such as C#, Java etc… which contains objects, properties and methods. It meant to have supply data to view and vice versa and plays role of code behind. Usually we are using TypeScript to write a class.

Metadata- We use this block to add metadata to an angular application. A normal class converts to a component when it gets decorated with @Component({ }) decorator.

A component declaration can be done by invoking ‘@angular/core’ library.

A class is decorated with a decorator (@Component ({ })) which adds metadata to angular class.

An component has several properties. Some of common properties we need to run a component such as selector, template, templateUrl, providers etc… For complete list of properties browse the below url from angular official reference.

          https://angular.io/api/core/Component

app.component.ts

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

@Component({

  selector: 'my-app',

  template: `

  <div align="center">

    <h1>{{"Welcome to "+myData+" Application"}}</h1>

  </div>

  `,

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular8Demo';

  myData = "Hello World";

}

Here selector becomes a directive that is responsible to load the html content provided by template or templateUrl i.e. <my-app> </my-app>A class is decorated with a decorator (@Component ({ })) which adds metadata to angular class.

template loads the in-lined html and templateUrl loads the html content from url given.

Class acts as code-behind file which supplies and accepts data to and from template/view.

export keyword is used to enable a component to be used by another component by importing it.