I have added a file called rathrola.component.ts. Just like our app.component, we have imported the component class from core module, as shown below.
If you remember, a component is nothing but a class with metadata. Let’s name our class as rathrolaComponent and since we need to use this class in other components, we are going to export it.
And now, we shall attach the component decorator of our class. Within this component decorator, we are going to specify a selector and a template as shown below.
- @Component({
- selector: "my-tuts",
- template: `<h2>Rathrola Prem Kumar, Consultant</h2>`,
- })
In template, we created simple html tags as shown above.
Now, we have an import statement, component decorator, and associated class. Finally, our newly created component is complete.
In my previous article, I have mentioned that usually in Angular application, we will have one main component called root component and other components are part of this root component.
In our case, root component is app.component and rathrola.component is going to live inside this app.component.
Hope, you are very clear.
So now, from app.component, remove the single line quotes in template in component decorator, as shown below.
- import {
- Component
- } from '@angular/core';
- @Component({
- selector: 'my-app',
- template: `<h1>Hello World From Rathrola Prem Kumar</h1>`,
- })
- export class AppComponent {}
So, remove the single quotes and keep back tick (`). This will be below the esc key in the keyboard.
This is going to allow us to specify html in multiple lines. Now, what is the html we need to specify.
It is selector of rathrola.component as shown below,
- import {
- Component
- } from '@angular/core';
- import {
- RathrolaComponent
- } from './rathrola.component'
- @Component({
- selector: 'my-app',
- template: `<h1>Hello World From Rathrola Prem Kumar</h1>
- <h4>Header 4 from App component</h4>
- <my-tuts></my-tuts>`,
- styles: [`h4{
- color:blue;
- }`],
- directives: [RathrolaComponent]
- })
- export class AppComponent {}
- if ('this_is' == /an_example/) {
- of_beautifier();
- } else {
- var a = b ? (c % d) : e[f];
- }
Now, we need a way to inform our app component about rathrola.component that we do by using another configuration called directives.
Directives is going to have an array, it is just a name of the component as below
directives: [RathrolaComponent]
Note: we need to import rathrola.component before we create directive as shown above.
Run the application and see the output as below.