Project: Personal website #2

Directives are core of angular2. Even components also come under directives. There are various kinds of directives.

Attribute directives

ngClass, ngStyle are 2 examples. They are used to apply css classes to the DOM elements.

Structural directives

*ngIf, *ngFor are 2 examples. These kind of directives are used to change the actual DOM elements. The “*” is the syntax to use these directives.
The general syntax to use *ngIf

<li *ngIf=”condition”>some-statement</li>

But *ngIf can also be written differently using property binding

<template [ngIf]=”condition”>



In previous post I have just used a single dummy object to display the data. After learning about *ngFor directive we can use it to display collection of objects.

I have realised that I did not explain much about how components are laid out and various events binding used.


This component is same as before. There is nothing much to be done other than changing some UI. I thought I make my UI more fancy once I get core angular2 part done! As of now it looks like this (below). I have used a some dummy image.


I have used *ngFor to insert multiple projects as <li> items. Actually projects component is subdivided into project-list and project-detail component. The click event on any project item is registered and that particular item’s details are displayed other right side. I have created a class of type Project.ts to store project details.


Similar to projects components I have used *ngFor to display list of items. I wanted to show professional and interpersonal skills separately hence I have used 2 more components for the about under skills component. I have created a class of type Skill.ts to store project details.


I’m keeping contact component as constant footer. I made the contact strip dynamic It means that how many contact objects I add in the future the strip can adapt. Contact component might have got biggest make over by far!

None the less I impressed by the progess I’m making. I’m also devloping another project along side to this for learning purpose. I’ll upload it to git so that you can look at it too. Right now, I’m having a bit of problem about using dropdown using materialize.css .



See you in next!