- Switch and If statements are two type of condition statements that exists in many programming languages. Angular 2 is no different.
- In this section we will be focusing on ngSwitch.
- NgSwitch is used mainly when we want to display one element and it’s children from a set of elements based on a condition
In an ng-if statement during the evaluation, as the course array length property is empty the second div in the yellow box will appear in the DOM. Whereas the div in the red box just above will not at all if the DOM.
We can also bind an ng-if statement to a div’s property. However, unlike the ng-if statement above the DOM element will still be rendered into the page even if the hidden expression evaluates to false;
If you have a component called component C which exists inside Module A, and you want to use component C outside module A inside Module B for instances all you have to do is export it.
In the picture above we have registered tweet.component with tweet.module. However, let’s say we want to use tweet.component outside of the tweet.module all we have to do is export the component.
When you commit your project to Github it is extremely important to remove the node_modules folder from your commit and add it to the .gitignore. This is because when you pull down the code onto another machine you can run npm start which will look at your package.json file and will generate the node_modules that your project requires. All you need to ensure is that you have the package.json. You can follow these steps. If you create a .gitignore and git is already aware of your node_module folder then run the steps below:
- git rm -r –cached .\node_modules – Just encase it has been cached by git
- Git add .
- Git commit
Setting-up the development environment
When you commit your code to the GitHub repository, it is best practice to not commit the node_modules dependency folder. Instead you should automatically generate the node_modules folder on your client machine, by running npm start.
It is more efficient to use external templates as supposed to inline templates because your application will need to make a second request to the server to request the html file. The request will only be made the first time for the extra html file then it will be cached by the Browser
Class binding in Angular
In the green box
In the snippet [class.Active]. The class part literally means the class selector in the CSS property, it does not refer to typescript, remember that we have class and id selectors. So the class.Active refers to the class Action, which is a selector defined below:
Note: I defined the Active class property in the file style.css which is available globally.
notice how we set the [class.Active] equal to a Boolean. This means that when the Boolean property is true, then the class Active will be applied. However, when it is false the class Active will not be applied. So the styling of the span element is dependent on the boolean value of isActive, which is property in the typescript class supporting this view. If it is true the the styling will be applied if it is false the styling won’t be applied. So have do we modify this behaviour; well through a method called, in this case, onClick().
In the Red Box
The round click with the verb click specifies a DOM action. So on click we specify that an Action will be called. This action method is onClick which is a method in our ts class. The first parameter is the trigger. The second parameter is the method that will response to the trigger in our Typescript class.
Style binding is very similar to class binding.
The style refers to the inline style class that has a lot of properties one of them is the background color property. Which we set equal to the boolean isBack. We automatically, update the value of the isBack property through the method secondClick().
When we click on the Hello World button we call the getClick method. We can prevent the event from bubbling further up the DOM tree with the statement $event.stopPropagation(); . Without this line then the OnDClick method would be invoked.
To bind a DOM property and a component property together. The example below is one that shows Two-way binding. We bind the Value property of the input box to the title property in the app.component.ts class. We bind the value of the text box to the title property. Then we bind from the WordUpdate method to the title property. So when we type into the text box the property field updates. This is a long way of doing two way binding.
A shorter way of doing two-way binding is the following, below: