Let’s understand the Angular components!

Introduction to components, its structure, how you can create one and play with its customization.

Photo by Iker Urteaga on Unsplash

Components, Components, components everywhere. Tell you honestly, I have tried this approach in my PHP based projects as well, and made my life/project so much decoupled, easy to manage and replicate and reuse. Just whatever feature module I am creating, I am keeping CSS/JS and other pages combined. Let's discuss what you have in angular for the same and where I got the idea from.

On General, Angular projects consist of

• Modules, Modules consists of
• Components, Components consists of
• HTML template, CSS styling, and javascript logic to work with DOM.

For example, an Angular project may have a Login module

• The login module will have a login_form component.
• login_form component will have HTML(consists of form tag), CSS for styling specificity of form say, and some validation in JS say.

If you are totally new to angular, you should consider reading getting started with Angular, Introduction & application architecture.

1. Let's quickly create a component so we get to know. To create a component using Angular CLI, run the following command.

> ng generate component login

Where login is a component name, once we create a component, we will see the following output.

We have 4 newly created files and 1 file has updated. New component's default path is src/app/component-name/ in our case it is src/app/login/

We have the following files created at the login component generation.

1. login.component.css
2. login.component.html
3. login.component.specs.ts
4. login.components.ts

and one file updated is app.module.ts

Every component’s main file is going to be its .ts file where you will find the detail of components along with usage of those other created files.

Let's check the login.component.ts file.

Typical structure of angular component

Let's understand each and every line of this file.

import { Component, OnInit } from ‘@angular/core’;

this import component and onInit module from the angular core as it looks like.

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.component.html’,

styleUrls: [‘./login.component.css’]

})

@ is known as a decorator in angular, this means, it tells angular project what this class is all about.

component means @ is telling this is not an ordinary class but this is a component class, so treat it like component. Cool?

it also tells, this component is having selector: ‘app-login’

this component will use ‘./login.compoennt.html’ as a template file,

the styleSheet of this component will be used from ‘./login.component.css’

Everything is pretty much clear but let's talk about the selector part first.

selector: ‘app-login’ tells us where our component is going to be rendered in the main module, which is initially app.module.

• selector: ‘app-login’: means <app-login></app-login> would be the custom tag where this component will appear, where <app-login> is custom HTML tag.
• selector: ‘.app-login’: which means <div class=”app-login”></div> will be used to render this component. this is class selector
• selector:’[app-login]’: means <div app-login></div> will be used to render this component, were app-login is custom attribute.

Now jumps into app.module.ts file where we saw updates while creating this component.

We notice, Angular-CLI automatically updated this file and added new login.component in import list also in declarations of modules decorator.

which means, selector of login.component can be used in templates of the app module.

Let's let tell app-module to use login.component as main component.

To do so, replace

bootstrap: [AppComponent]

with

bootstrap: [LoginComponent]

Also, go to src/index.html which is main file, replace

<app-root></app-root>

with

<app-login></app-login>

Now your running angular application will start displaying content of login.component.html.

this way you explored how the component is created, how you can modify its call, and what is structure of a component class in angular.

Let’s see you with the next article before ending this year. Stay awesome, happy coding. ❤