In this tutorial, we are going to learn about what is a component and how to create new components in\nangular.
\n\n\nNote: In the last tutorial, we have created our angular project by using cli
\n
A component is a reusable piece of UI where we can create once and reuse throughout our app.
\nHave you seen in the above image header and blogposts are two different components combined to build this index page.
\n\nThis tutorial assumes that you already created a new angular project by using angular-cli.
\n
Once you successfully created an angular project then open your project by using your favorite code editor.
\nNow you can see app folder in your src directory these is the place where we create new components by default we can get root angular component called app.component.ts.
To create a component we need to create a new folder with the component name inside app folder.
Let’s create a new folder called header inside your app folder.
Each angular component contains three files which are .html, .css and .ts.
.html : It contains the html markup related to that component.
.css: It contains the styling related code.
.ts: It is a TypeScript file which contains the component logic.
\n\nNote: Angular uses the TypeScript which is a superset of the JavaScript if you don’t know about typescript then check out my TypeScript beginners tutorial.
\n
Let’s create a new file called header.component.html inside the header folder and add the below code.
<nav>\n <h1>This is my header</h1>\n</nav>angular uses the naming convention name.component.fileextension
Now, create a new file called header.component.ts inside app folder and add the below code.
import { Component } from '@angular/core';\n\n@Component({\n //html tag of the component\n selector: 'app-header',\n templateUrl: './header.component.html',\n styleUrls: []\n})\n\nexport class HeaderComponent {\n\n}In the above code, we first imported a Component decorator from the @angular/core package where it accepts the object as an argument.
selector: The name we added here, is used to add this component inside other component HTML files.
\n\n\nNote: The selector name should start with
\napp-chooseyourname.
templateUrl: Here we need to add a path of the html file we are using for this component.
\nstyleUrls Here we need to add a css file path for this component.
So far we have created a HeaderComponent but angular doesn’t aware of this component by default, for that, we need to import our HeaderComponent inside app.module.ts file because angular first checks this file to figure out what are available components and modules.
import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { HeaderComponent } from './header/header.component';\n@NgModule({\n declarations: [\n AppComponent,\n HeaderComponent ],\n imports: [\n BrowserModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }In the above code, we imported our HeaderComponent and added it to the decalarations array.
To render a component, we need to add a component selector name(app-header) as an HTML tag, inside our app.component.html file because it’s the root component HTML file.
<h1>Hello from app component</h1>\n\n<!--header component we created --><app-header></app-header>The app-header name we chose it inside our header.component.ts file.
Now run your dev server by using ng serve in your terminal.
Now inside our app folder, we have a new component called footer.
To render this footer component, first, we need to check what is the name of a selector used for this component, which is present inside footer.component.ts file.
import { Component, OnInit } from '@angular/core';\n\n@Component({\n selector: 'app-footer', templateUrl: './footer.component.html',\n styleUrls: ['./footer.component.css']\n})\nexport class FooterComponent implements OnInit {\n\n constructor() { }\n\n ngOnInit() {\n }\n\n}Now in your app.component.html add the below code to render the footer component.
\n<h1>Hello from app component</h1>\n\n<!--header component we created -->\n<app-header></app-header>\n<!--footer component we created using cli --><app-footer></app-footer>