Angular Component
In angular, a component is just a piece of code that presents information to the user.
Any angular component is divided at least into two parts:
A component decorator- for loading the html, css templates as discussed here.
A class- this is where the component logic is done.
The above screen shows an angular component. Note the two parts mentioned earlier; class and component decorator.
That is basically how an angular component is created. Look, the component decorator is what makes the whole file an angular component. It must therefore be declared since it determines how this component is instantiated, processed and used at run time.
To note also is that you must tell angular what components you expect to use in your application. This is done by listing them in the app.module.ts file; under the ngmodules declarations array. This way the component is available for use. See my snip below:
Also note that all the components being listed must be imported in the file as well. In this case we have two components available for use. The
AppComponent
IntroComponent
and both have been imported.
Personally, this way the application is able to look through and locate the components containing the tags that are called in various html codes or templates. Like in my case, i will call the intro.component in the app component by simply writing the special tag app-intro in the selector metadata of the intro component decorator as follows:
Note the <app-intro></app-intro> tag in the above screen. Upon running, the output should be like below:
The first two lines are the lines in the app component while the last line reading “intro word” is a line in the intro component.
Note that in this case we haven’t imported the IntroComponent into the AppComponent. We have only told the application that you will need to display the component whose selector in the in the component decorator contains <app-intro> tag.
Friends, that is how components work in angular. Hope to see you in the next tutorial. Leave your comment and/or clap as well.
Meanwhile if you are wondering what angular is, please read this.
