Angular Basics-4

Photo by DESIGNECOLOGIST on Unsplash

Welcome to the fourth part of Angular Basics. We will deep dive into directives in this part.

The starting point of the project can be taken from this zip file. Our little project have an array of number in app.component.ts file.


Also our app.component.html file contains the below. It is not complete and will be working on the same.


Now, we will update the code to show the numbers, by adding the code with ngFor in app.component.html file.


Now, in localhost the numbers will be shown, but the button will not work.


For the number to work now with button, we will first change the numbers array to odds and evens in app.component.ts file.


Next, in app.component.html file, we will update the logic to show, evens or odds array on click of the button.

We are using ngIf for the same, which uses the boolean variable onlyOdd.


Now, our app is working properly and showing the odd or even number on clicking it.


Let’s recap ngClass and ngStyle a bit. We will add a class of oddNum in app.component.css file.


Now, back in app.component.html file, we will add the directives for ngClass and ngStyle, which add class and style directly.


Now, we are going to build our own directive. Create a folder basic-highlight inside app folder and then a basic-highlight.directive.ts in it.

Here, we are changing the background-color, color and padding of any element in which it will be attached.


We also need to include this directive in app.module.ts file.


After that we can use this directive in any file and we are using it to add style to a paragraph in app.component.html file.


Now, we will be able to see the paragraph with the styles in localhost.


Now, we will create another custom directive. This time we will also create a new directive through the command line.

ng g d best-directive

In this directive, we will react to some events like the moving of mouse on the element. So, in the best-directive.directive.ts file, we will have a HostListener for mouseenter and mouseleave.

We are also using the HostBinding to bind some CSS properties.


Now, in the app.component.ts file, we will be adding the appBestDirective in a new paragraph.


Now, the mouseover and mouseleave is working properly in our paragraph.

mouseover and mouseleave

Finally, let’s understand ngSwitch. Suppose, we have a item of 5 in our app.component.ts file and for different values, we need to show different things.


Now, in app.component.html file, we will use the ngSwitch to show different case. The switch is very useful in case of multiple if else statements.


The ngSwitch is showing the statement based on the item and with this we will complete this part.


The code for the same can be found in this github repo.




Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Simple Calendar using ReactJS & MomentJS

Installing ReactJS using webpack and babel

This I Promise you | Controlling Asynchronous code in JavaScript with Promises

The JSON Format For Open Data Interchange

How to use Migration in Sequelize

Aspect-oriented Programming

This is a hackathon type design

a11y tips: Button or link and which to use.

How to pass variable to inline background image in Vue

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Sneak peek in to Angular

Exploring Bootstrap 5 with Angular — Creating Dropdown

Configuring Environment Variables in Angular | Angular Environment

Angular Service — #2