I want to make a countdown component.
But instead doing everything in the main component, here app.component.html, what I'm gonna
do is to build new components that will be place here inside.
I want to follow a Solid architecture, and Solid begins by...
..."S": single responsibility principle.
So I'm gonna start with a component that will be a progress-bar, and its main task will be only
this: show the progress of the counter. If you'0re using Angular CLI
You can build a new component just by using "ng generate component" and the name of the component
ng generate component
components name
in your case you the skeleton of the whole project
so you don't need to create the component
you can open it directly from progress-bar. The progress bar folder is where I created this new component
and has a template very simple, progress-bar.component it also have a stylesheet that is empty
And it also have a test
And of course the component itself that at this point is almost empty.
A class decorator and an empty constructor.
Okay so first things first we have to the declare this component in the main module. If the component is called
progress-bar component, I've got to open the main module: AppModule
Here in the declarations, I have to add this progressBarComponent I also have to import it, but
the autocomplete of Visual Studio Code tells me how to import it automatically.
Let me make it wider...
So import progressbarComponent from app/progress-bar/progress-bar.component, or directly from
dot slash, progres-bar, slash progress-bar.component
Now I can use it on Angular. So I move to app component, and inside of hello world I'm gonna put here this
progress bar, so if the selector was called app-progress-bar
What I have to do is add this component app-progress-bar
So I save this and I move to the browser
What I can see now is this progress bar component. If you go to the inspector I have this app-root
this H1 header
And inside I have this app-progress-bar
So you have seen now how to build a new component and the next step is to make this component a real
progress bar.