Angular Components

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:

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.

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 {	
}

3. 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;
}