Angular 7 Components

Updated March 28, 2023

Introduction to Angular 7 Components

The following article provides an outline on Angular 7 Components. In angular everything is component. Components are the most important feature of angular. Our whole angular application is built using different components. The idea behind our angular application is to build components. Component are reusable part, it also makes our application easy to maintain and scalable. Component are nothing but a classes that is used to interact with the HTML which display on the browser.

We can generate angular component by using some commands. But for this we need to get int he app directory and then open command shell to run some commands which are as following:

Syntax:

ng generate component (component_name)

or

ng g c (component_name)

Example of Angular 7 Components

Given below is the example of Angular 7 Components:

Example:

ng generate component_one

or

ng g c componenet_one

Now open the command prompt in app directory of your project and run one of the above command.

Output:

Generated File

• component-one.component.ts
• comp1.component.css
• component-one.component.spec.ts
• component-one.component.html

We have generated our component which will consist of 4 files listed below:

1. component-one/component-one.component.ts

This file is the component class with name ComponentOneComponent written in typescript. This class implements OnInit and contain method ngOnInit by default.

File: component-one.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component-one',
templateUrl: './component-one.component.html',
styleUrls: ['./component-one.component.css']
})
export class ComponentOneComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

2. component-one/comp1.component.css

This file is empty.

This is a CSS file in which we can place our CSS that we want to apply.

3. component-one/component-one.component.spec.ts

This file is a typescript file which is used for testing purpose. This file is option its presence is not necessary.

File : component-one.component.spec.ts:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ComponentOneComponent } from './component-one.component';
describe('ComponentOneComponent', () => {
let component: ComponentOneComponent;
let fixture: ComponentFixture<ComponentOneComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ComponentOneComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ComponentOneComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

4. component-one/component-one.component.html

This file is written in HTML. which is used to display data to user. Basically it will contain the html code , how the page will look like.

File: component-one.component.html

<p>component-one works!</p>

Root directory files and structure

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

Now angular cli also add the routing file for us.

This are the files which are created by default by the angular cli when we create our angular project.

1. app.module.ts

This file will contain the library and other things. If we look closer into the file it also contain one entry for our Newly generated file i.e. ComponentOneComponent. We also need to declare this Newly created component into the declarations array. But for now it is already done.

File:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentOneComponent } from './component-one/component-one.component';
@NgModule({
declarations: [
AppComponent,
ComponentOneComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now we can test our application. One more thing app component is the parent component and all other component that we add later is the child component.

Hence we can say app is the parent component for all other component. When we run our application for the first time it will run on the 4200 port URL : “http://localhost:4200/” this will first execute our index.html file.

File: index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular7Demo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

This is the normal html file which is generated by the angular. But this file contain one tag i.e. <app-root></app-root> this tag has the reference in the main.ts.

We will see main.ts below.

File main.ts:

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err =>console.error(err));

Here in main.ts we have AppModule imported and in the bootstrapModule as well we have defined it. So it is making the AppModule to get loaded when we first invoke the angular application.

main.ts is the entry point for angular application which contains the parent “appmodule”. This “appmodule” will further contain the child module to get loaded.

We have entry of our new component into the appmodule.

2. app.component.ts

This file is also generated by angular by default. AppModule also has entry into app.module.ts. This is the file which contain the selector definition here which written oinindex.html.

i.e

To class must have @Component annotation on it.

This also contain various property like:

• selector: We need to specify a unique name for this. Which will act as a unique tag for this html page.
• templateUrl: Path of you html you want to render.
• styleUrls: It is array CSS file path

File:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular7-demo';
}

3. app.componenet.html

This is a html file, which contain html code and how the page will look like to user. app.component.ts has its entry into template path. So whenever the app.componenet.ts file is called this page will get render to the use with data to display. This file will contain lots of code by default but we can modified it in any way we want.

When we load our application to browser it will look like this by default functionality: angular default html page.

Output:

Conclusion

So angular depends upon the component only. To have a angular application we must have one angular component into our application. One more thing component are the child of module. Module is the parent for all other component. By which they get loaded. Angular all depends on components only.

This is a guide to Angular 7 Components. Here we discuss the introduction and example of Angular 7 Components. You may also have a look at the following articles to learn more –

1. Angular Features
2. AngularJS Services
3. Angular 2 Architecture
4. Angular Alternatives