Angular 7 Components Tutorial With Example

Angular 7 Components Tutorial With Example is the topic we will elaborate. Angular Component controls a patch of the screen called a view. Angular Component consists of two things. 

  1. HTML
  2. TypeScript class
  3. Metadata

On real-time Angular application, they both working together and pass the data and properties to each other. Angular Class is responsible for the logic of that component, where the template is to view the data to the user based on the condition. We can also write some condition inside the template as well with the use of *ngIf.

If we create a component, then we need both HTML and the data to work with. If the data is fetched from the backend, then we need to display to the User. Now, if the user is performing some action from their end, then the Angular class should listen to that event and respond according to it.

Let us say, if the button is clicked then an event will be fired, and we need to listen to that event inside the angular class and respond to it. So it is event-driven handling.

Angular 7 Components Tutorial With Example

Essential Angular Component looks like this. Component files are saved as ‘filename’.component.ts

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angcomp';

Here, @Component is the metadata which defines the selector of that component, template of the component which has HTML code and the CSS file of that particular component.

Here, the title is the variable defined and declared its value. We can reference its value inside the component template file by using the double curly braces like this.


{{ title }}


You can define the component’s application logic which supports the view inside a class. The class interacts with a view through an API of properties and methods.

Component metadata

The @Component decorator identifies the class immediately below it as the component class and specifies its metadata. In the example code above, you can see that AppComponent is just  the class, with no special Angular notation or syntax at all. It’s not the component until you mark it as one with the @Component decorator.

Templates and views

You define a component’s view with its companion template. A template is a form of HTML that tells Angular how to render the component.

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component’s host view. The component can also define a view hierarchy, which contains embedded views, hosted by other components.

Template syntax

The template looks like regular HTML, except that it also contains Angular template {{ }} syntax, which alters the HTML based on your app’s logic and the state of app and DOM data. Your template can use data binding to coordinate the app and DOM data, it can use the pipes to transform the data before it is displayed, and directives to apply app logic to what gets displayed.

<h2>Angular Component</h2>

<p>This is angular component</p>


Data binding

Angular supports the two-way data binding, a mechanism for coordinating the parts of a template with the parts of a component. Add a binding markup to the template to tell Angular how to connect both sides. You can find more about the component on this page.

Finally, Angular 7 Components Tutorial With Example is over. Thanks for taking.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.