Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular 6, Part 2: An Overview of Components

DZone's Guide to

Angular 6, Part 2: An Overview of Components

A quick look at using components and modules in your Angular 6 code, and some example TypeScript to help get you started.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

If you are new to the Angular framework or just finding out why Angular is popular in the web development, then this series of articles is for you. Through this series of articles, you can learn about every aspect or benefit of Angular, including how to use it in your own development.

Angular is a component-based framework. Components are the main building blocks of the Angular framework. So, as per the definition of a component, it is a basically a class which is defined to be visible in any elements in the screen or browsers. For defining the component in Angular, we need to use the @Component() decorator. In fact, components are a really a unique idea. Because each of the component classes represents an independent unit which is highly reusable and can be maintained without hampering the other components.

Advantages of Component-Based Framework

Before going on to use components in Angular 6, first, we need to understand the advantages we can obtain by using this framework.

  • Reusability – One of the most important advantages of this framework is the reusability of code in our applications. In this framework, the component is the most granular units in our application. Since every component is normally independent of other components and can easily be pluggable into the application. So if we need to reuse any code in any part of the application, then the component is the best choice for that.
  • Increase Development Speed – In today’s software development world, most development teams follow Agile development processes. Component-based development fully supports agile development. Components can be stored in a repository from which different a team can access, integrate, and modify them, throughout the development process.
  • Easy Integration – Since components are always developed by the development team, production quality user interface code can be managed in a centralized repository. Application development teams can use this source code repository and they can easily integrate those components into their own module or components. Also, if required, an application development team can extend any component using the base source components.
  • Optimize the Design Process – With the help of this component-based framework as a reference, product managers, business analysts, or UI designers can spend less time on defining or designing new application interfaces, since they can reference any component at the time of defining the requirements documentation.

Angular Component Layout

As per the basic concept of Angular architecture, every Angular component must be a part of a tree of Angular Components – which means every, or multiple, components must be related to other components. So this hierarchy always starts with a root component which is generally known as a Bootstrapped Component. These are steps for creating a Bootstrapped or Root Component –

  • Create an Angular Module – In Angular 6, we need to use the @NgModule() decorator to define the Module Class. Within this class, we need to include its related components, directives, pipes, services, etc.
import { NgModule } from '@angular/core';

@NgModule()

export class SampleModule { }
  • Create an Angular Component – The component needs to be defined using the @Component()  decorator.
  • Import { Component } from "@angular/core" as follows:

    @Component({
        selector: "home",
        template: "<h1>Welcome To Angular 6 Series</h1> "
    })
    
    export class HomeComponent {
        constructor() {
        }
    }
    • Add a Component to the Module – After defining the components, we need to attach that components within the module. This can be done using the declaration options of the @NgModule() decorator.
    import { NgModule } from '@angular/core';
    
    import { HomeComponent } from './SampleCode/app.component.home';
    
    @NgModule({
        declarations: [HomeComponent]
    })
    
    export class SampleModule { }
  • Bootstrap Module – As per the Angular framework, one single Angular application can contain multiple Angular modules. But, of the all modules, one module must be declared as the startup or bootstrapped module within that application so that, at the moment of initialization of the application, that module can be automatically invoked and then the rest of the application will work. To achieve this, we need to bootstrap one Angular module. Normally, it is done via the main.ts file within which we write the code for this type of operation.  
  • import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    import { SampleModule } from './app.demo.module';
    
    platformBrowserDynamic().bootstrapModule(SampleModule);
  • Bootstrap Components – Just like Angular applications, every Angular module also contains thousands of components within it. But like modules, one component needs to mention the startup component within the module. This can be done using the bootstrap property of the @NgModule() decorator.
  • import { NgModule } from '@angular/core';
    
    import { HomeComponent } from './SampleCode/app.component.home';
    
    @NgModule({
        declarations: [HomeComponent],
        bootstrap: [HomeComponent],
    })
    
    export class SampleModule { }

    So when we define the component, we can define the HTML part related to the UI in a separate HTML file and link that file to the component file. This can be done by using the templateUrl of the @Component() decorator.

    Sample code fir app.component.template.html file:

    <div>
            <h1>Angular 6 Component with Template</h1>
            <br />
            <h2>Debasis Saha</h2>
    </div>

    Sample code for app.component.template.ts file:

    import { Component } from '@angular/core';
    
    @Component({
        moduleId: module.id,
        selector: 'custom-template',
        templateUrl: 'app.component.template.html'
    })
    
    export class TemplateUrlComponent {    
        constructor() {
    
        }
    }

    Also, we can define custom styles related to CSS via the HTML part related to the UI in a separate HTML file and link that file to the component file. This can be done by using the styles or stylesUrl properties of the @Component() decorator.

    Sample code for app.component.style.html file:

    <div>
            <h1>Angular 6 Component with Template with Style</h1>
            <br />
            <h2>Debasis Saha</h2>
    </div>

    Sample code for app.component.style.ts file:

    import { Component } from '@angular/core';
    
    @Component({
        moduleId: module.id,
        selector: 'template-style',
        templateUrl: 'app.component.template.html',
        styles: ['h1{color:red;font-weight:bold}','h2{color:blue}']
    })
    
    export class StyleUrlComponent {    
        constructor() {
    
        }
    }

    What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

    Topics:
    web dev ,angular ,typescript ,angular 6

    Opinions expressed by DZone contributors are their own.

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}