Category: Angular

Angular 6 and its new features — explained in three minutes

Angular has come out with some amazing new features in version 6.0.0, especially in Angular-cli. Now, with Angular 6, you can easily update your old packages, create native web elements using Angular Elements, and many other things. Let’s take a look!

 

ng add

ng add is a new command in Angular-cli that helps you install and download new packages in your angular apps. It works the same as npm, but it doesn’t replace it.

 

Read More

Please follow and like us:

How to Add Bootstrap to Angular CLI Project

In this article we will learn how to setup an Angular project with Bootstrap 3 or Bootstrap 4.

1: Creating an Angular project with Angular CLI

The first step is creating your Angular project using Angular CLI.

For this example we will use the following command:

ng new angular-bootstrap-example

2: Installing Bootstrap from NPM

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap@3.3.7

For Bootstrap 4:

npm install bootstrap

 

Read More

Please follow and like us:

Learn Angular be it 1,2,4 or 4+

If you are reading this post am assuming its been quite a pressure now with new languages coming in everyday. Angular is one of them, no wonder React and Vue have captured the market too but, Angular has its own pros and cons.

This post isn’t about coding, its about how and from where you can learn Angular.

So, today am gonna put in few YouTube channels here for you, where you can easily learn and follow the step by step process of Angular.

Before you start with the tutorial lets get this thing clear, for AngularJs that is Version 1 Core Javascript is essential whereas when it comes to 2 and 2+ version its all based on Typescript. So, i would recommend taking up few tutorials for typescript too before you go ahead with Angular.

AngularJs (v1) Tutorials:

Typescript Tutorials:

Angular 2 Tutorials:

Angular 4 Tutorials:

Angular 6 Tutorials:

Video Credits:

LevelUpTuts

The Net Ninja

codedamn

Alright guys thats it. All videos are from YouTube and worth watching.

Happy Coding!

Please follow and like us:

How to write angular services in angular 4 ?

Recently I was working on this angular project when I got stuck to a place – angular services. I wanted to use global variables and functions but had no clue how do i achieve it. After lot of research and going through angular docs i finally ended up to a solution of services.

Angular Services is nothing but an inject-able piece of code that every component can call and use. We will follow the steps to achieve it:

STEP 1

In your command line write:

ng generate service service-name

(service-name will be name of your service) now you will see two files added to your app folder.

STEP 2

Open the file service-name.service.ts and write the following code:
import { Injectable} from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http'; // For http calls if any else you can remove this line.

@Injectable()
export class PortfolioService {

headers = new Headers();
options;
api_url = '';
site_url = '';
skin = '';

constructor(private http:Http) {

this.http.get('assets/config.json').subscribe(data => {
this.skin = data.json().skin;
this.renderer.addClass(document.body, this.skin);
});

}

getapiurl(){
this.http.get('assets/config.json').subscribe(data => {
this.api_url = data.json().api_url;
console.log(this.api_url);
});
return this.api_url;
}

getsiteurl(){
this.http.get('assets/config.json').subscribe(data => {
this.site_url = data.json().site_url;
console.log(this.site_url);
});
return this.site_url;
}

}

Here in our example we are fetching the values for api_url , site_url and skin from config.json file using http request.
the function getapiurl() has a return statement in the end which returns the value of the variable api_url

STEP 3

Open your component file and add following code at respective places.

Starting with imports:
import { ServiceNameService } from '../service-name.service';

In your @component add this:
providers: [ServiceNameService]

In your constructor add this to the parameter:
private service: ServiceNameService
Like this
constructor(private service: ServiceNameService )

Now comes the important part of calling the function that we created in the service file.
We have declared a private variable service in our constructor using which we will call our functions.

this.service.getapiurl()

The above code will give the output as the value of the variable we returned in service.
Thats it!
Now you can use the same function as many times we want and in every component we like.
For any queries leave a comment or you can contact me on the given details in the sidebar.

Enjoy! Happy Coding.

Please follow and like us:

Powered by WordPress & Theme by Anders Norén

Help us by spreading the word. :)

Follow by Email
Facebook
Facebook
YouTube
YouTube
Instagram