Hello, everyone, and welcome back in this lesson, we're going to talk about how the angular eating
and system supports the case of plural sentences.
Let's give an example.
Let's say that we would like to add here a sentence beneath the added button that would say something
like this.
We would like to write here in case there are zero courses in our platform that no courses are available.
On the other hand, if there is only one course available, we would like to write the following sentence.
One course is available and if there are several courses available, one or more we would like to write
a total of, let's say ten courses are available.
So depending on the total count of courses, that is getting to our component.
We would like to modify the content of this sentence.
We would like also to send all the alternative sentences to the translator.
Let's then see how angular internationalization is going to support this use case.
The first thing that we are going to do is we are going to head over here to our application component
and we are going to arrive here courses total member variable.
This is going to be a number that is going to correspond to the total number of courses available in
the course array.
Now that we have this very well-defined, let's see how could we write this expression?
So the first thing that we are going to do is we are going to apply here the Aetate an attribute, as
usual.
Now, the syntax that we are going to be using here is going to be slightly different.
So we are going to add here a pair of curly braces.
Next, we are going to add here the variable containing the is total.
After that, we need to add here some indication that we are able to provide multiple forms of the plural
of a sentence.
So we are going to adhere here, the plural keywords.
Next, we are going to start providing here the multiple alternatives that we have covered before.
So in case the courses total member variable is zero, we are going to be writing no courses available.
So in order to identify that case, we are going to add here equals zero.
And after this indicator that this should only be shown if this value here is zero, we're going to
have here an extra pair of curly braces and we're going to have inside with the text that corresponds
to this case.
So in this case, no courses available.
Next, we are going to handle the case when only one course is currently available.
So we are going to identify that case with equals one.
And inside here, an extra pair of curly braces we are going to have here the sentence.
One course is available.
Now we want to handle the last case, which will happen whenever there are multiple courses available.
So more than one in that case, we are going to write here the other identifier.
And inside here, one final pair of curly braces.
We're going to write the following sentence, a total of and let's say in courses are available.
We are going to have to write the value to this N placeholder that we have put here, because this would
be printed out as a normal string.
So if we want to print out here an expression here available at the level of our template, we can do
so by using the normal angular, double curly brace expression.
And here we can perceive the value of the courses total member variable.
Let's see this expression in action to make sure that everything is working correctly.
So in this case, this expression is going to also be interpreted by the angular runtime and we're going
to see on the screen these multiple messages depending on the value of this variable.
Now that we have our server up and running, let's refresh here our application and have a look here
at the message that we get so we can see we get a total of ten courses are available.
But now take a look at the following.
If we head over here to our DV data file, which contains here our list of courses, let's say that
we would remove all of these courses here from the list so we would have zero courses.
Let's remove this value.
Let's hit command s and we are going to reload with our application.
So as we can see this time around, we have the sentence, no courses available as expected.
So that corresponds here to this case.
And if we switch over here to the courses array and this time around we delete everything except the
first element of the list and we reload our application, we are going to get the sentence.
One course is available.
So everything is working as expected.
Now, let's head over here to the terminal.
Let's add here all our courses back as well.
And let's see how this expression is going to get extracted here to the messages file.
What are we?
Stop the angular clay and we are going to run again, our internationalization extractor.
Let's now have a look at the content of our messages file.
So as we can see, we got here a new translation unit.
We have here a source tagged just like before.
And here we have the complete content of our expression.
We can see that we also have here some indication this is going to be replaced by a variable names causes
total.
So the translator is going to understand the context onto which this message is getting applied.
As we can see, angular internationalization support is very powerful.
Let's dive deeper into it.
Let's talk about alternative expressions.