What is the components in Angular 4

Posted by

Components in Angular 4


Hello and welcome to another lesson of Angular by Podina Tutorials. In this lesson, we are going to talk about the component in Angular. Components are actually classes, that communicate with the .HTML file of the component, which in turn display on the browser. Remember that major of the web development done in the components. As we discuss in our previous lesson, our main HTML and CSS files contain in the app folder. Let’s see the below files:

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

All of the above files were created by default when you setup new project. What if you make your own component in Angular 4. This is our main topic in today lesson. Today we are going to discuss How to make own component in Angular 4. So Let’s create your own component in Angular 4.

As you know that the above all files are contained in the app folder, which is made by default. Let’s create another directory in app folder with the name content and create new files in it. I am going to create two files in it with the name;

  • content.component.html
  • cotent.component.ts

Did you notice the file which I create in content directory and the one which is already created in app directory by default. As you have noticed that I put content before .component.html and .component.ts.

content is actually the directory name, which I made recently in the app directory. So every file will contain the directory name and then the file name like;


The new directory structure look like:


Let’s see the image below:

Also Read  How to Install NodeJS using Angular CLI

New directory for <a  href=
Angular 4 component" width="560" height="314" /> New directory for Angular 4 component

Now I am going to make a component.ts file. Let’s have a look below:


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

@Component ({
selector: ‘app-content’,
templateUrl: ‘./content.component.html’

export class ContentComponent{}

Now let’s see the component.html file;


<p> New content  </p>

Now import contentcomponent from the content directory in app.module.ts and declare it in NgModule. let’s have a look to app.module.ts file:


import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

import { ContentComponent } from ‘./content/content.component’;

declarations: [AppComponent,
imports: [BrowserModule],
bootstrap: [AppComponent]

export class AppModule { }

Remember: Mention the folder name correctly followed by content.component.

Now goto the app.component.html file and call selector app-component which we defined in content.component.ts file. Let’s see the app.component.html file first:


<h1> Welcome to {{title}}!  </h1>
<h1> {{string}} </h1>
<app-content> </app-content>

Now let’s see the output of the above changes in the code. The output is shown below in the image:

output of the new code- component
output of the new code


As you see, creating a component in Angular 4 is so easy. All you need is the basic understanding of app directory and the files containing in it. As you see we have created the new directory in app folder with the name content, and then we create some files like content.component.ts and content.component.html, and then you see the output of that component. So that’s all we have in this lesson.

Please feel free to leave your valuable feedback in the comment below. Share it with your friends and I will see you in next lesson.


Leave a Reply

Your email address will not be published. Required fields are marked *