Angular CSS Demo [Angular Tutorial]


In this section, we will further discuss Angular CSS demo classes through the following exercises. Here, Instead of writing ng-valid, ng-pristine, etc. one by one, we can call it all by using className. It will fetch the validity of a given variable, in this case, #stockName and #stockCode. Success - the current state of validations are shown. Next let’s try to click the stock name input field. Once the selected field lost the focus, blur event is triggered. Therefore, it has been touched. Next let’s try to input a value. Since a value was already provided, it should be changed to [...]

Angular CSS Demo [Angular Tutorial]2017-09-17T06:31:02+00:00

Angular NgModule


Angular has its own modular system called ngModule, also known as Angular Modules. It is a vital part of every Angular application. In fact, all of the Angular applications have at least one Angular ngModule. @NgModule({ declarations: [ AppComponent, StocksComponent, HighlightDirective, StockDirectiveDirective, DateFormatterPipe, DashboardComponent, BondsDirective ], imports: [ BrowserModule, FormsModule, HttpModule, routing, NgbModule ], providers: [StockService, CurrencyService], bootstrap: [AppComponent] }) export class AppModule { } It’s simply a class with the ‘@ngModule” decorator Declarations, Imports, Providers and Bootstrap have to be specified here It is usually found in the ‘app.module.ts’ Note that Bootstrap and Bootstrap 4 are not equivalent. Bootstrap 4 is the fonted application framework and Bootstrap [...]

Angular NgModule2017-08-13T11:38:27+00:00

Angular 2 vs Angular 4


Before the Angular 2 framework was released, we actually have the AngularJS framework or Angular 1. AngularJS, which is based on JavaScript, was initially released way back 2010. After several years, the Google team had planned to build a totally new Angular framework with different architecture and modules from the old AngularJS.  In Mid 2014, the design and development of Angular 2 was started. On September 19 of that year, the first code commit is done on their GIThub account. On March 14, 2015 the first Alpha version was released and on that same year, the beta version was released as well.  On May 3, [...]

Angular 2 vs Angular 42017-04-27T21:55:59+00:00

The Era of Angular 4


You might get confused and may ask “is this a hoax? Isn't it way too early seeing as Angular 2 has just been released late last year? What about Angular 3??”. The answer is the following, First, forget that there is Angular 3, the reason is that Google jumped already so that the upgrades will be correlated to version 4. Second, is that there are only few revisions and features added in Angular 4 but as for syntax and logical flow of the framework, it should almost be the same with the version 2. Next, let us have an overview of the new features [...]

The Era of Angular 42017-04-23T05:29:18+00:00

Adding Dashboard [Angular Tutorial]


In this section, you will learn how to add a dashboard. First, we need to create a dashboard component.  It can be done manually or via angular-cli. For this example, we will use angular-cli. In your integrated terminal, type ng g component Dashboard. Dashboard files will be automatically generated. Now, it’s time to add this Dashboard component to our application. Go to the app.routing.ts file and import DashboardComponent. import {ModuleWithProviders} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; import {StocksComponent} from './stocks.component'; import {AppComponent} from '.app.component'; import {DashboardComponent} from './dashboard/dashboard.component'; const appRoutes: Routes = [ { path: '', component: DashboardComponent }, { path:'stocks', [...]

Adding Dashboard [Angular Tutorial]2017-04-07T09:00:21+00:00

Bootstrap 4 Navbar [Angular Tutorial]


Let’s try to add this navigation bar to our Angular 2 App. Going back to your browser, search for bootstrap 4 navbar and click this. In here, you can find different kinds of a navbar. A very simple one looks like this: <nav class="navbar navbar-light bg-faded"> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)<, </li> <li class="nav-item"> <a class="nav-link" href+"#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nva-link" href="#">About</a> </li> </ul> </nav> Another one is the Collapsible Content navbar. It has a customizable dropdown menu. Another example would be the Responsive navbar. It’s designed to [...]

Bootstrap 4 Navbar [Angular Tutorial]2017-03-22T06:42:56+00:00

Integrating Bootstrap 4 in Angular-CLI [Angular Tutorial]


Bootstrap 4 is a UI framework made by the angular-ui team. To know more about its uses, just go to This is the preferred Angular 2 UI framework because it is written and maintained by the same angular team. To use Bootstrap 4 in your angular-cli, you need to install it first in your npm. To do that, open your integrated terminal and type npm install bootstrap@next While it’s installing, go to and scroll down to the Global Library Installation. Take note of the highlighted code. You’ll need it in the future steps. Below are the same codes in [...]

Integrating Bootstrap 4 in Angular-CLI [Angular Tutorial]2017-03-03T07:49:20+00:00

Creating and Using Pipes [Angular Tutorial]


Creating Pipes are done using angular-cli. To do that, let’s open our integrated terminal. Go to View>Integrated Terminal Or use the shortcut key combination shown In the terminal, type the command ng g pipe [pipeName]. Open the date-formatter.pipe.ts file and it will look like this. import { Pipe, PipeTransform } from 'angular/core'; @Pipe({ name: 'dateformatter' }) export class DateFormatterPipe implements PipeTransform { transform(value: any, args?: any): any { return null; } } All the needed parts of a pipe like imports, decorator and export class is already generated. Now, lets us our pipe to show an user-friendly date and time. Go [...]

Creating and Using Pipes [Angular Tutorial]2017-02-10T07:21:19+00:00

Angular 2 Quickstart Project [Angular Tutorial]


Quickstart Project is similar to what you will see in website. It’s not made to produce full running applications but it is recommended on testing out new prototypes of your Angular 2 apps. (Note that your Node and NPM versions should be 4.x.x and 3.x.x and above to run quickstart) The next thing that you should do is create your files for your app. To do that, open your terminal (or cmd for Window users) and type “git clone <github url> <your Angular2 project name>” as seen below: After you’ve downloaded the files, install the files on your local machine: [...]

Angular 2 Quickstart Project [Angular Tutorial]2017-02-05T00:35:03+00:00

Using Web-based Angular 2 Editor [Angular Tutorial]


Let’s start off with the basic development of an app. Here, we’re going to use the site, an easy to use web based editor: This is the editor. It’s divided into 3 parts. Starting from the right is the file directory tab. Next the editing space, and the package tab. You can explore the parts in the file directory or play with the editor. But for now, let’s do a simple project. To create a new Angular 2 template, click New>Angular>2.0(TS) - for now we will be using TypeScript. This Angular 2 Template is ready to be run. Just simply [...]

Using Web-based Angular 2 Editor [Angular Tutorial]2017-01-30T06:26:47+00:00

New Courses

Contact Info

Oxford St. Epping, Sydney, New South Wales, Australia 2121

Mobile: +61 499 802 855

Web: TutorialsDojo

Recent Posts

error: Content is protected !!