Angular 5 Tutorials -Angular component Nested
Hi Learner thanks to you, for reading this article. In this article you will learn about Angular 5 components .Before diving into this article have look on previous articles .Angular 5 Tutorials will helpful to you learning Angular 5 step by step
Now you are looking at Nested Angular Component and in next article you will be learning how to skinning angular component by css and selector , installation of Bootstrap with node js by Angular CLI
What is Component? (Angular component tutorials)
Components are basic building block of an angular js application . Any component must be belongs to @node module in order to access for another component in Application
Every component have name it is captured by selector key .with help of this name you will rendering the template URL of that component in app.component.html file
From the previous article you learned how to implement Angular component manually .but in this article you will be learning creation of Component with Angular CLI
Let’s crating component through CLI with using ng generate. To Generate component passing name of the component as parameter.
Sample structure of Component with Angular CLI
- Ng component name of the component or ng g c name of the component .
- After correct naming of Angular component you hit enter the Angular CLI are creating component for you .
- Components are reusable, so you can reuse as soon as possible with selector of the component
- You need to make sure ,update the app module with import and export the components
- When you are creating the angular component with Angular CLI then the cli will automatically added in app module
- The below capture will helpful to understanding of creation of Angualr5 Components and consume those components in app.component.html
Ng g c servers
Let’s add new component in server component to render servers html markup in app.component.html as like
<app-servers></app-servers> ,then server component html will be looking like as shown below
<h3> Hi Learner im custom server Component .. 🙂 </h3>
We are rendering the html template in app module by templateurl of the angular component, instead of that you can render html markup of the any component in app component by name of the component .
For Good understanding take look on below screen capture
Let’s created a new component with name internalHTML
Now open internalHTML.ts replaced templateurl key with template and assign name of component name as custom html tag