This is a continuation of my Angular series, in the last article we talked about how to set up Angular on our device and how to create a new project.
(Find the first article here: https://dev.to/amsuarez/getting-started-with-angular-4p37)
In this post we are going to talk about the role components play in Angular and how to display data on to an HTML file.
What are Angular Components
Angular components form the data structure for your application. Each component has a set of files that are automatically created when components are generated. These files include two main files that we will focus on are the HTML and the TypeScript file located in our App component.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'tutorial';
projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}
app.component.html
<div>
</div>
You may wonder why the HTML document is incredibly simplistic that is because in Angular components can embed into other html documents. In simple terms this component is just part of the public HTML index.html document.
In fact to illustrate this lets look at the larger HTML document (index.html)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial</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>
Here we can see familiar tags for HTML such as head, body, and document declaration. Among these common elements is the app-root element. This is our entry point for components, in this case the app.component.html will take its place when the project is ran.
Displaying Data
Now that we have that basic understanding of Angular components, let's dive into using them to display data. To do this we are going to use a concept called interpolation allowing us to refer to expressions into text. To do this we will utilize a double bracket as such {{}} with the variable in between.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Site';
projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}
app.component.html
<div>
{{title}}
</div>
This works great in regards to single data variables but when it comes to lists there is an optimal option that will reduce the code we right.
Lastly we are going to demonstrate how to use ngFor directives for an easy way to display lists of data.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Site';
projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}
app.component.html
<div>
{{title}}
<p *ngFor="let project of projects">{{project}} </p>
</div>
Well that's it for this lesson! Hopefully you found value in it and if you want more follow/react/comment to show support!
Top comments (0)