Angular Components

quiz
Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!

Overview

Angular components are the most fundamental UI building blocks of an Angular application. They are directives with a template. It is defined using @Component. Component decorator let you identify a class as an Angular component and offer extra metadata about how the component should be processed, created, and utilized at runtime.

Scope

The article focuses on what angular components are, how they can be defined, how to utilize them, and what fundamental features we might need to use within them.

There are a few more topics that will be covered in future articles, such as component life cycle, component communication, property binding, and event binding.

Introduction

Angular Components are the foundation of an angular application. They are a form of Directive; however, they come with an HTML template.

An application can have multiple components that can be reused independently anywhere in the application wherever it's required.

The example shown in the image below could help you understand the application's component structure:

angular-component-structure

Prerequisites

To create a component, ensure that you fulfill the following requirements:

  1. Angular CLI
  2. Angular project. If you don't have a project, create one using ng new <project-name>.

Each Angular Component Consists of

Each component consists of at least one Typescript file .ts with the decorator @Component, inside which many properties can be defined. Some of the most prevalent properties are:

  1. selector - To get the css selector for the component
  2. templateUrl/template - To define HTML template of the component
  3. styleUrls/styles - To define styling of the component

There are lot of other properties that can be used inside @Component decorator, please checkout the list Angular component.

Creating a Component

A component can be created in a variety of ways. The most common approaches are as follows:

  • Create a component using the Angular CLI
  • Create a component manually by creating files

Creating a Component using the Angular CLI

Following CLI command can be used to create a new component

ng generate component my-component 

ng g c my-component  //short hand

After running the command, you should see a new folder and a few files inside it. The @Component decorator which holds all of the component's meta data, can be found in the .ts file.

my-component-using-angular-cli

You will also see some changes in app.module.ts file, CLI will add MyComponentComponent in the declaration section.

Creating a Component Manually

  1. Create a subdirectory under src/app name it my-component
  2. Create a typescript file named my-component.component.ts and add the code below
import { Component } from '@angular/core';

@Component({
  selector:'app-my-component',
  template:`<div>
      Hello World!
  </div>`
})

export class MyComponentComponent {	
}
  1. Add the component to the module by importing MyComponentComponent into the app.module.ts file and adding it to the declarations array as seen in the following code:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Specifying a Component's CSS Selector

A selector is used to uniquely identify each component in the component tree and to trigger component instantiation.

The specified selector may be used anywhere in the html file to add the component to the application.

File: app.component.html

<div>
    <app-my-component></app-my-component>
    ...
</div>

Defining a Component's Template

There are two ways to define a component template:

Inline Template

ng g c my-component --inlineTemplate=true

inlineTemplate flag can be used to create inline template for the component. By default inlineTemplate set to false.

@Component({
  selector:'app-my-component',
  template:`<div>
          Hello World!
  </div>`
})

HTML can be added inside the template property in the @Component decorator in the same .ts file.

In separate file

You will get the template file separately if you build a component with the following command:

ng g c my-component
@Component({
  selector:'app-my-component',
  templateUrl:'myComponent.component.html'
})

File: myComponent.component.html

<div>
      Hello World!
</div>

Declaring a Component's Styles

CSS is written in a global file style.css in an Angular application and can be written separately for each component.

Component CSS can be defined in two ways:

Inline - Inside .ts file

ng g c my-component --inline-style=true

The --inline-style flag can be used to create inline style in the component. By default --inline-style set to false.

@Component({
  selector:'app-my-component',
  template:`<div class="main">
      Hello World!
  </div>`,
  styles: [
      `.main{
        background: red;
      }`
  ]
})

In Separate File

@Component({
  selector:'app-my-component',
  template:`<div class="main">
      Hello World!
  </div>`,
  styleUrls: [ './myComponent.component.css' ]
})

File: myComponent.component.css

.main{
    background: red;
}

Conclusion

  • Angular component is a fundamental UI building piece that may be reused wherever it is needed.
  • @Component decorator makes a class as an Angular component
  • All the metadata related to a component stay inside @Component
  • CSS selector is unique for every component and can be used to add components at any place
  • HTML template and styles can be added in the component in two ways inline and in the separate file
Free Courses by top Scaler instructors