Angular 8 Tutorial

Angular Components

let's understand components in angular 8




A little background

This tutorial on Angular 8 components is in continuation of our Angular 8 Tutorial Series and if you have not read the previous parts of the tutorial , it is recommended that you go through them first. In the last part , we learned about many important files and folders in Angular 8 and we'll refer to them again and again in this and further parts.

Angular components

Components are the cells or building blocks of an Angular app and when you're writing an Angular 8 app , you'll spend a significant time creating and modifying components. Technically components are Typescript classes along with a component decorator where we provide metadata that dictates how the component should be used by the app. Note that in order to be usable in an Angular 8 app , a component has to belong to a NgModule. In this part of the tutorial , we'll go back to our app.component.ts and explore its different parts and we'll also edit the component and add Inventions related information to the component. Let's get started.

How angular 8 component file looks like?

Following is the code from our app.component.ts file , read the informative comments to see what's happening in each line.

							
// app.component.ts 
import { Component } from '@angular/core';  // import Component class from angular core 

// define the component metadata usnig the decorator and export the class so it can be 
// imported by other modules 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'app';
}
                                    
							
						


Now it's the time that we start getting our hands dirty in the code , let's start customizing this component as per our InventionsHub project. Let's add a new class to define an Invention , open your app.component.ts in your editor and make the changes mentioned below.

							

import { Component } from '@angular/core';

// add a new class 
export class Invention {
    name : String ; 
    inventor : String ; 
    year : String; 
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // title = 'app';
    invention : Invention = {
        name : ' C Programming Language ' ,
        inventor : ' Dennis Ritchie ' , 
        year : ' 1972 '
    }
}
							
						


Good , so we created an Invention class and also initialized an object of the same in our app component , now we can go on and edit the template file app.component.html to bind this object to the view. Open the file app.component.html and make it look like the following snippet:

                        
<!-- app.component.html -->

<div style="text-align:center">
    <h1>
        Welcome to {{title}}!!
    </h1>

</div>
<h2> Greatest Inventions in History of Mankind </h2>
<hr>

<!-- bind data using curly braces to the data in app.component.ts -->
<h2> {{ invention.name }} </h2>
<h3> {{ invention.inventor }} </h3>
<h3> {{ invention.year }} </h3>
                        
                    

Run your app

use command ng serve to run your app and it starts your app on http://localhost:4200 as shown below:

							
> ng serve
							
						

now point your browser to the above address and you should see something similar to the following screenshot:

Ng serve successfull

Note that once you run ng serve, It will automatically reload your changes in the browser , you don't have to restart your project or reload your browser.

Summary

Wow! we've done it again, so in this part of our Angular 8 tutorial , we started exploring angular components. we also looked at a very basic example of data binding. In the next part of the tutorial , we'll learn how to create components. Hope you are enjoying learning about the Angular 8 , see you in the next part.