See how Angular uses the
ngStyle directives to transform the DOM when a template is rendered.
You can learn about each of the built-in directives by clicking the links below, or see them in action in the example which follows.
Let's take look at this simple voting app which makes use of the built-in directives.
iterates over a list of candidates which are retrieved from a
identifies the candidates position in the array when a button is clicked.
displays the colored blocks by looping over an array which is initialized with the number of
votes for each candidate.
The color of the blocks is determined by an
directive. The template expression
in quotes returns
other which correspond
to the class names in the
to change the appearance of the leading candidates vote count. When the candidate is winning
Finally, when we move the mouse over the colored blocks we display some
additional information about the candidate. Here we use an
directive to determine which message should be display.
In the text below, when you see a word or phrase, click on it to highlight the source code.
Also, take a look at the IDE style to see this tutorial in wide-screen mode. You can always switch back using the Style link at the top of the page.
There are several ways to show and hide elements on a page. Let's look at a few of them.
ngIf is false. Try it yourself in the application below.
When we set the
none using a style binding.
hidden also hides the element but still takes up space on the page.
Here is the output from this component.
To learn more about the individual built-in directives, take a look at these tutorials.
To find out more about Angular components, check out these tutorials.
<input>fields such as
@Outputto pass data in to and out of a component.