Search Tutorials


Angular 4 Tutorial - Creating a Components Project | JavaInUse

Angular 4 Tutorial - Creating a Components Project

Components can be defined as main building blocks of angular applications. An angular application is usually composed of several components. Components act as glue between data,logic and its template. In Angular 4 applications we have a component tree. In this tree a component usually called as the app component acts as the parent component node

Angular 4 Tutorial - Table Of Contents

Angular 4 Hello World Program Angular 4 Tutorial - Creating a Components Project Angular 4 Tutorial - Routing Project
A Typical Component Structure binds data and logic to its template. angular application can be viewed as an Application tree with the app component being the tree root. The component classes are decorated with the annotations. @component
Previously we had created a Hello World App. We will create the components for this project. We will be creating a component named as employee-list and nest it in parent child style to compose an application. Here employee list will be the child component and the application parent component usually called app component will be the parent.
angular4-2_3
Navigate to the src/app directory and create a folder named as components and create the component as employee-list.
mkdir components
cd components
ng g component employee-list


angular4-2_1

We can see that a subdirectory named as employee-list gets created with it containing the corresponding required files.
Next we get the components integrated in the module. For this open the app.component.html and create a div having the tag value as the selector property present in the employee-list.component. In our case the selector value is app-employee-list.
<h1>
  {{title}}
</h1>
<div>
<app-employee-list></app-employee-list>
</div>

Also in the employee-list.component.html add the data we want this div to display Start the application.
npm start

angular4-1_3
Now go to localhost:4200-

angular4-2_2
 

See Also

Removing the # from the AngularJS URL Use Google reCaptcha with AngularJS Use AngularJS NgCloak directives Example PrimeNG-UI Components for AngularJS 2 Basic Example