To start with this blog post, let me put the focus on some of the terminologies that I have used in the title of it. So, the agenda is to change the CSS of our Parent Component with the help of a button inside our child component.
For those who are totally new to Angular, CSS stands for Cascading Style Sheets which help developers to style their Angular Applications. With the release of Angular 7, when we create a new Angular application using CLI, it asks us which style sheet format would we like to add to our application. See in the image below:
https://thepracticaldev.s3.amazonaws.com/i/z8xhea1ldb5xlz6o4gab.png
Proceeding after choosing the convenient stylesheet format, CSS for the sake of this blog post, we will create two components inside our application.
To create a component using CLI, we use:
ng g c component-name
To start with, create a button inside the template of a component.
https://gist.github.com/NishuGoel/c63e6e603c94fb1c466bc1288dd121e9
Now to access this button to change the CSS on the parent component, we use @Output() and EventEmitter. To do that,
https://gist.github.com/NishuGoel/e6bcf39205dd4c7bbfea2ea272ef73b5
Now, let us go to other components to use this button and change the CSS.
https://gist.github.com/NishuGoel/3cea7023c8933b001e7d4ca7b1d30690
And the Parent Component looks like this.
https://gist.github.com/NishuGoel/67df7aac7e60c09a83d6e5c9017ac6a1
If we look at the CSS file now, it is kept very simple for understanding this article.
https://thepracticaldev.s3.amazonaws.com/i/e2blr1wbtmlmc9fp3uvi.png
Having done this, let us look at the results now:
https://thepracticaldev.s3.amazonaws.com/i/z6nw9hoslmmu3gieqne2.gif
Top comments (0)