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

For example, an Angular project may have a Login module

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

> 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.

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.

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. ❤

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store