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.

app.component.ts

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

app.component.html

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

app.component.html

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

Number

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

app.component.ts

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.

app.component.html

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

Toggle

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

app.component.css

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

app.component.html

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.

basic-highlight.directive.ts

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

app.module.ts

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.

app.component.html

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

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.

best-directive.directive.ts

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

app.component.ts

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.

app.component.ts

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.

app.component.html

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

ngSwitch

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

Starting from scratch

Learning NodeJs by creating a Notes app

Creating a beautiful portfolio using the TakeShape Portfolio Template!

Vue JS vs React JS. Which framework to choose in 2020?

Transforming an existing Angular application into a Progressive Web App

How to GraphQl, from Frontend perspective[Part I]

Writeup : Challenge-5

Understanding Flexbox in React Native | by Navdeep Singh Bedi

Understanding Flexbox in React Native | by Navdeep Singh Bedi

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

Lazy Loading in Angular Js

Compile Angular Application

What is Angular Material?

Angular and Angular Material Logos

Lazy loading: Angular modules

Lazy loading angular cover