Category Archives: Angular 4

What is Event Binding in Angular 4

Category : Angular 4

Welcome to another lesson of Angular 4 by PodinaTutorials.com. In this lesson, we are going to discuss, What is Event Binding in Angular 4. Let’s elaborate what actually event binding is. Then we will proceed to, How it worked in Angular 4.

Event Binding is a user interaction within an application in the form of keyboard movement, a mouseover or a mouse click. It actually generated an event and this event needs to be handled in order to perform some sort of action. This is what actually Event Binding is!

It is a one-way data binding. It sends information from the view to the component class. Event Binding is pretty much opposite to Property Binding, where data is sent from component to the view.

Watch Video, If you want to clear you Mind

You can also Subscribe to our YouTube Channel Podina Tutorials.

Types of Angular Event Binding

Angular 4 provides a variety of events. Here are the most common event binding which you can use.  Furthermore, you can also see it at https://developer.mozilla.org/en-US/docs/Web/Events

(focus)=” myFunc()” // This element has received focus
(blur)=” myFunc()” // This element has lost focus
(submit)=” myFunc()” // This element submit button has been pressed
(scroll)=” myFunc()” // This element scroll the dacument
(cut)=”myFunc()” // This element cut and copied the selection to the clipboard
(copy)=” myFunc()” // This element copied selection to the clipboard
(paste)=” myFunc()” // This element paste the selection from the clipboard
(keydown)=” myFunc()” // This element provide “ANY key is pressed”
(keypress)=” myFunc()” // This element provide the functionality of “ANY key is pressed except Shift, Fn, CapsLock”
(keyup)=” myFunc()” // This element provide “ANY key is released”
(mouseenter)=” myFunc()” // This element is pointing device onto the element that has the listener attached.
(mousedown)=” myFunc()” // This element pointing device button is pressed on an element
(mouseup)=” myFunc()” // This element pointing device button is released over an element
(click)=” myFunc()” // This element pointing device button
(dblclick)=” myFunc()” // This element pointing device button is clicked twice on an element
(drag)=” myFunc()” // This element or text selection is being dragged
(dragover)=” myFunc()” // This element or text selection is being dragged over a valid drop target
(drop)=” myFunc()” // This element is dropped on a valid drop target

Event Binding Example

Let’s create a button on Event Binding

<button (click) = "myFunc($variable)"> Click Button </button>

In the above code, Notice the $variable. $variable is optional, and it passes a variety of event properties, which is associated with that particular event.

Now let’s create myFunc() method below in the component class:

export class AppComponent {
  
  myFunc(variable) {
    console.log(variable);
  }

}

Conclusion

After doing the above code, run ng serve in the terminal and visit localhost:4200 in the browser. Click the button and you will see the result. I recommend you, to try more such events, which is provided above and also on the Mozilla page here: https://developer.mozilla.org/en-US/docs/Web/Events. You can also see our previous topic Data Binding and Regular Expressions in Angular 4 and property binding in Angular 4.

Book Suggested

Beginning Angular with Typescript (updated to Angular 5)

Buy the book Beginning Angular with TypeScript to master Angular. It is a great book with lots of code examples.

Event Binding in Angular 4


what is property binding in Angular 4

Category : Angular 4

what is property binding in Angular 4

Welcome to another lesson of Angular 4 by PodinaTutorials.com. Here in this lesson, we are going to discuss, what is property binding in Angular 4. So Property binding is a term and is defined as, updating the value of a specific variable in component (i.e.) Model and display it in view, which is presentation layer.

Let’s elaborate it now. Property Binding means you are passing some sort of data from the component class to an element in the view. The good thing about property binding is that it allows to control element property values from component and can be changed whenever needed in the project.

Now we are going to implement an example for further understanding. Let’s take a look;

Actually, there are a total of three ways to define property binding in Angular 4, They are:

<!-- first way -->

<div bind- class =" content-background">
// some code here
</div>

<!-- second way -->

<div class="{{content-background}}">
// some code here
</div>

<!-- third way -->

<div [class]=" content-background ">
// some code here
</div>

The first way to define property binding is by adding bind- before the element property.

The second way is to use interpolation {{}} to define the value, as long as the value you are defining is a sting.

The third way to define property binding is by wrapping brackets [] around the element.

what is property binding in Angular 4

what is property binding in Angular 4

Example

content.component.html

<div class="{{class_property}}">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

content.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-content,
templateUrl: './content.component.html',
styleUrls: ['./content.component.css'] })

export class ContentComponent {

class_property = “content-background”;

}

Here in the above example, you can see that in the content.component.html file we take a <div> tag with a class = “{{class_property}}”> which is a single variable in  the content directory file content.component.ts. If you look to the content.component.ts file, you can see the variable named class_property which is assigned to content-background.

You can also take the <div> tag as;

<div bind- class ="class_property">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

And also like this;

<div [class]="class_property">

<h1> Content Starts </h1>
<p> The Content Para </p>

</div>

Conclusion

As you see above; there are multiple ways to bind a property in Angular 4. Here in this lesson, you learned three ways to bind a property in Angular 4. The first way is by putting a variable in {{variable}}, the second ways are putting bind- before class, and the third way is to put a class in brackets [class]. In this lesson, you have learned that property binding allows you to define element attribute values from component class and also learned that it is a one-way data binding, as you can see that we only set data from component to the view.

Other topics you may also like

Book Suggested

Beginning Angular with Typescript (updated to Angular 5)

This book is for developers with basic familiarity with HTML, CSS, Javascript and object-oriented programming. No TypeScript or AngularJS experience needed.

Related Keyword

property binding angular 4
angular 4 two way binding
event binding in angular 2
angular 4 data binding
angular 4 binding
angular 2 binding
angular 2 component properties
angular 2 template reference variable

Data Binding and Regular Expressions in Angular 4

Category : Angular 4

Data Binding and Regular Expression in Angular 4

Welcome to another lesson of Angular 4 by PodinaTutorials.com. Here we will discuss, what is data binding and Regular Expressions? This lesson contains two separate topics. The first one is Data binding and the second one is Regular expressions. So in first part, we are going to discuss, what is data binding, and then in the second part, we will discuss what is Regular Expressions and how we can use it in our project. So let’s have a look at our first part:

Part 1: Data Binding

Data Binding is an important term in Angular 4, and was available from the previous versions of AngularJS, and Angular 2. {{}}; Curly braces is used for data binding and the process is also called interpolation. As you previously seen, How to declare variables, like the one declared for title and string. Let’s remind it again:

Example

The variable in the file app.component.html is referred as this {{title}} which is already initialized in the file app.component.ts.

app.component.ts

import { Component } from ‘@angular/core’;

@Component ({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’
styleUrls: [‘./app.component.css’]
})

export class AppComponent{
  title = ‘Our Course’;
  string = ‘hello world’;
}

app.component.html

<div>
  <h1> Welcome to {{title}}!  </h1>
  <h1> {{string}} </h1> 
  <app-content> </app-content> 
</div>

Part 2: Regular Expressions

In Angular 4, we can use Regular Expressions. Regular Expressions, sometimes called RegExp or RegEx, can be used in Angular 4. If you already know JavaScript! you might use it with form validation, where through validation we ensure that the form take the correct input from the user. I use them most of the time. Let’s see the following example for clear understanding.

{{ 2 < 5 ? “True” : “False” }}

The output of the above Regular expression will be true. The above condition mean;

If 2 is less than 5, Then display True otherwise display False. Similarly, we can take more examples according to our requirements.

Let’s consider some more examples:

{{ 3 > 9 ? “The Condition is Right” : “The Condition is Wrong” }}

The output will be The Condition is Wrong.

{{ 3 + 5 }}

The result will be 8.

{{ 8 -  2 }}

Result will be 6.

{{ 6 * 4 }}

Output will be 24.

{{ 15 / 3 }}

You will get 5 as an output.

Similarly, you can write as many expressions as you can. But for now, let’s just know that what actually regular expression is? You can use it like if statement and in a loop. In the upcoming lessons, we will more elaborate this, but for now, just learn how it works.

Conclusion

In this lesson, we discus two things. The data binding and the regular expressions. Data Binding is also called interpolation, where we call the variable in app.component.html, which is already defined in app.component.ts file. The second thing is the Regular Expression, where we define the logic.

Suggested Book

Beginning Angular with Typescript (updated to Angular 5)

In this book, you will learn Data Binding and Regular Expression in Angular 4. You’ll start building Angular apps within minutes.
Angular is one of the leading frameworks to develop apps across all platforms. Reuse your code and build fast and high performing apps for any platform be it web, mobile web, native mobile and native desktop. Here you will also learn about What is Data Binding and Regular Expression in Angular 4 You use small manageable components to build a large powerful app. No more wasting time hunting for DOM nodes!


Styling webpage using CSS in Angular 4

Category : Angular 4

Styling webpage using CSS in Angular 4

CSS, which stand for Casecadding Stylesheet is a style sheet language used for describing the presentation of a document, which is written in a mark-up language. Moreover, you can use it in multiple ways like an inline stylesheet, internal stylesheet, and external stylesheet.

In Angular 4, you can give style to your webpage by adding some CSS to it. But the question is how to add it to your Angular document. Here I have an Answer.

Let’s consider the Angular Directory first:

First-angular-app
  .idea
  e2e
  node_modules
    src
      app
        app.component.css
        app.component.html
        app.component.spec.ts
        app.component.ts
        app.module.ts
    assets
    environments

Here in the above directory structure, you will see the folder name app.component.css. You can write all your code here in this file. Let’s open the file name app.component.html and write some mark-up tags here:

Styling webpage using CSS in Angular 4

CSS with Angular 4

app.component.html

Let’s take header in your first Angular page and then take a CSS class for it in app.component.css file.

<div class="header-background">
  <p class="font"> Header if the Page </p class="font">
</div>

app.component.css

.header-background{
  Background-color: green;
}

.font{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
  font-size: 30px;
  font-weight: bold;
}

Now take a content <div> for content and describe the presentation in css file.

<div class="content">

<h1 class="header1"> Welcome to our page </h1>

<h3 class="header2"> About Podina Tutorials </h3>

<p class="para">
Podina Tutorials is an online website, where you can learn with your 
own pace anytime Anywhere. We are present on multiple platform to 
serve you. You can visit our website www.podinatutorials.com or by 
visiting our YouTube channel. You can also like our Facebook page.
</p>

</div>

CSS for above file is given below;

.content {
  Background-color: yellow;
}

.header1{
  Color: Red;
  font-size: 30px;
  font-weight: bold;
}
.header3{
  Color: Orange;
  font-family: "Times New Roman”;
  font-style: italic;
}

.para{
  Color: black;
  font-family: "Times New Roman”;
  font-style: italic;
}

Now take a footer <div> tag for footer and describe it in CSS files.

<div class=”footer”>
  <p class=”link”> Copyright @ PodinaTutorials.com 2018 </p>
</div>

CSS file for the above footer is given below:

.footer{
  Background-color: pink;
}

.link{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
}

Now let’s combine all the HTML and CSS file together. The complete code of HTML and CSS file is given below:

app.component.html

<div class="header-background">
  <p class="font"> Header if the Page </p class="font">
</div>

<div class="content">

<h1 class="header1"> Welcome to our page </h1>

<h3 class="header2"> About Podina Tutorials </h3>

<p class="para">
Podina Tutorials is an online website, where you can learn with your 
own pace anytime Anywhere. We are present on multiple platform to 
serve you. You can visit our website www.podinatutorials.com or by 
visiting our YouTube channel. You can also like our Facebook page.
</p>

</div>

<div class=”footer”>
  <p class=”link”> Copyright @ PodinaTutorials.com 2018 </p>
</div>

app.component.css

.header-background{
  Background-color: green;
}

.font{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
  font-size: 30px;
  font-weight: bold;
}

.content {
  Background-color: yellow;
}

.header1{
  Color: Red;
  font-size: 30px;
  font-weight: bold;
}
.header3{
  Color: Orange;
  font-family: "Times New Roman”;
  font-style: italic;
}

.para{
  Color: black;
  font-family: "Times New Roman”;
  font-style: italic;
}

.footer{
  Background-color: pink;
}

.link{
  Color: white;
  font-family: "Times New Roman”;
  font-style: italic;
}

Conclusion

CSS is an important aspect of any beautiful and successful website. Moreover, CSS is used in most of the designing framework like bootstrap. In Angular 4, you can also take an advantage of CSS. All you need to have is a basic understanding of it. If you don’t know about CSS, then you can look to one of our series HTML5/CSS3 course for Beginner.

Suggested Book

HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days

Welcome to this training for the Kindle edition of “HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 24 Hours”. This book contains the steps, strategies, and information you need to learn HTML5 and CSS3.


How to Build Custom Component in Angular 4

Category : Angular 4

Build Custom Component in Angular 4

In this lesson, you will learn more about Building Custom Components in Angular 4.


What is the components in Angular 4

Category : Angular 4

Components in Angular 4





Hello and welcome to another lesson of Angular by Podina Tutorials. In this lesson, we are going to talk about the component in Angular. Components are actually classes, that communicate with the .HTML file of the component, which in turn display on the browser. Remember that major of the web development done in the components. As we discuss in our previous lesson, our main HTML and CSS files contain in the app folder. Let’s see the below files:

  • app.component.css
  • app.component.html
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts

All of the above files were created by default when you setup new project. What if you make your own component in Angular 4. This is our main topic in today lesson. Today we are going to discuss How to make own component in Angular 4. So Let’s create your own component in Angular 4.

As you know that the above all files are contained in the app folder, which is made by default. Let’s create another directory in app folder with the name content and create new files in it. I am going to create two files in it with the name;

  • content.component.html
  • cotent.component.ts

Did you notice the file which I create in content directory and the one which is already created in app directory by default. As you have noticed that I put content before .component.html and .component.ts.

content is actually the directory name, which I made recently in the app directory. So every file will contain the directory name and then the file name like;

Directoryname.component.extension

The new directory structure look like:

+app
  +content
    content.component.html
    content.component.ts
  app.component.css
  app.component.html
  app.component.spec.ts
  app.component.ts
  app.module.ts

Let’s see the image below:

New directory for Angular 4 component

New directory for Angular 4 component



Now I am going to make a component.ts file. Let’s have a look below:

content.component.ts

import { Component } from ‘@angular/core’;

@Component ({
selector: ‘app-content’,
templateUrl: ‘./content.component.html’
})

export class ContentComponent{}

Now let’s see the component.html file;

content.component.html

<p> New content  </p>

Now import contentcomponent from the content directory in app.module.ts and declare it in NgModule. let’s have a look to app.module.ts file:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

import { ContentComponent } from ‘./content/content.component’;

@NgModule({
declarations: [AppComponent,
ContentComponent
],
imports: [BrowserModule],
providers[],
bootstrap: [AppComponent]
})

export class AppModule { }

Remember: Mention the folder name correctly followed by content.component.

Now goto the app.component.html file and call selector app-component which we defined in content.component.ts file. Let’s see the app.component.html file first:

app.component.html

<div>
<h1> Welcome to {{title}}!  </h1>
<h1> {{string}} </h1>
<app-content> </app-content>
</div>

Now let’s see the output of the above changes in the code. The output is shown below in the image:

output of the new code- component

output of the new code



Conclusion

As you see, creating a component in Angular 4 is so easy. All you need is the basic understanding of app directory and the files containing in it. As you see we have created the new directory in app folder with the name content, and then we create some files like content.component.ts and content.component.html, and then you see the output of that component. So that’s all we have in this lesson.


Please feel free to leave your valuable feedback in the comment below. Share it with your friends and I will see you in next lesson.



How architecture of Angular 4 worked

Category : Angular 4

How architecture of Angular 4 Worked

Welcome back to lesson 4, Here in this lesson we will discuss the architecture of Angular 4. In Angular 4, by default we contain some files like app.component.css, app.component.html, app.component.ts and app.module.ts. So here in this lesson, we will briefly discuss these terminologies in detail.




First of all, see the below image to understand the directory structure of app folder. let’s see the below image.

Files in App folder

Files in App folder

In the above image, you can see that we have the following files in the app folder:

·         app.component.css

·         app.component.html

·         app.component.spec.ts

·         app.component.ts

·         app.module.ts

Below we are going to discuss the above terminologies in detail. So let’s focus.

Watch the video tutorials to betterly understand the concept of Angular 4. In this lesson we will briefly discuss the architecture of Angular 4



app.component.css

app.component.css is a Case-cadding Stylesheet file, where all your design will be defined in terms of classes and id’s. You can modify the CSS file according to your requirements. Right now there are few attribute like color, background-color, and font-size is defined in the class .divinfo. You can take multiple classes and as many attributes as you need. let’s see the example:

Example:

.divinfo

{

  Color: red;

  background-color: yellow;

  font-size: 50px;

}

app.component.html

The HTML code will be written in app.component.html file. Let’s see the example below to better understand the concept of app.component.html:

<div class=”divinfo”>

  <div style=”text-align:center”>

    <h2>

      Welcome to {{title}}!

    </h2>

    <img src=”Angular-image.jpg” width=”200px” height=”200px”>

  </div>

    <h3>

      Some links related to Angular 4

    </h3>

    <a href=”https://angular.io/tutorial” > 
    Angular 4 Tutorials 
    </a>

    <a href=”http://www.podinatutorials.com/angular-4/”> 
    Angular 4 Tutorials- from Podina Tutorials
     </a>

</div>

app.component.spec.ts

app.component.spec.ts are automatically generated files which contain unit tests for source component.



app.component.ts

app.component.ts is like a controller in Angular 4. The class for the component is already defined. You can do the HTML processing over here in .ts file. The processing will include activities, such as interaction with other components, routing, connection to database etc.

Let’s see the example below:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'] })

export class AppComponent {
  title = Title-of-the-app;
}

app.module.ts

app.module.ts is a mechanism, which group components, directive, pipes, and serives that are related to each other, in such a way that combined with another module to create a web application. Let’s see the example below:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers[],
  bootstrap: [AppComponent]
})
export class AppModule { }



Conclusion

In this lesson, we briefly discuss How it all worked. We discuss multiple files in detail, that what is the functionality and services of each file. Previously we discuss, How to run the first application in Angular 4. In this lesson we discuss, How Angular 4 worked. We discuss the architecture of Angular 4. In next lesson we will be talking about, What is a component in Angular 4 and How to create Custom Angular 4 component. So stay tuned and we will meet in next lesson of Angular 4.


How to Run First Application in Angular 4

Category : Angular 4

How to Run First Application in Angular 4

Welcome back to lesson 3. So, guys, you must need to know that how the angular and CLI works. To work with Angular, we just need a kind of IDE. IDE means a kind of editor, where we just write our code. The simple one is Notepade++, but I am not going to use it. I will use the IntelliJ. You can also use the Visual Studio Code or the Webstorm as well, but I am going with IntelliJ.



So we are going to discuss step by step, How to run the first app in Angular 4. Let’s start from here:

Step 1: Create New Project

The first step, to Run your first App in Angular 4 is to start your IDE and “Create New Project”. In my case, I am going to load my project, because I already have one on my computer. So I am going to click on “Import Project”.

import project

import project

After clicking Import, select your project from “Project Directory”. In my case, the project is saved in C:\users\ShahzaibKamal\Desktop\first-angular-app. Let’s see the Image below:

Angular 4 project directory

Angular 4 project directory

As you can see below; By which way you want to create a project. I am just selecting the Eclipse.

Eclipse

Eclipse

Then give your project a Name, and click “Next Button”.

Rename your project

Rename your project

After typing you project name wait for a while after the processing get done, and then click on “Finish button”.

finish

finish



Step 2: Writing your code

First look of Angular Directory, Let’s see the image below and we are going to discuss it further:

open IDE

open IDE

As you can see, There is some files like,

  • Idea
  • e2e
  • node_modules
  • src

We have no concern with the above three folders, idea, e2e and node_modules. We will only continue our work in src folder. Let’s see the structure of src folder. src folder contains subfolders like,

  • app
  • assets
  • environments
src

src



Let’s see the first two folders, the app, and the assets. Our concern is with these two folders, as most of our project files will be here. assets folder will contain all the stuff like, images and videos etc.

Now come to the app folder. This folder will contain all our main files. Three files are very important in app folder,

  • component.html
  • component.ts
  • module.ts

app.component.html:

app.component.html is a view, which displays all the information in our web browser. Let’s have a look at an example:

<div style=”text-align:center”>
  <h1>
      Welcome to {{title}}!!
  </h1>
</div>

So in the above example where does the title come from? The title is actually a variable, which comes from the file app.component.ts. Let’s have a look at app.component.ts file.

app.component.ts:

Export class AppComponent {
  title = ‘Our Course’;
}

So if you look at the above two examples of code, you will see the title = ‘Our Course’; variable in AppComponent class. This title variable is then called in app.component.html file as Welcome to {{title}}!!

Output:

The output is: Welcome to Our Course

Let’s see the image below:

output of angular 4 example

output of angular 4 example

Conclusion:

Now let’s see how it all work? We have two files, for now, app.component.html and app.component.ts.

app.component.html file contain HTML tags and app.component.ts file contains all the logic, as we see in the above example. In app.component.html file we call a variable from app.component.ts, which we already defined here as title = ‘Our Course’;



That’s all we have in this lesson. Our Next topic is How it all worked. So stay tuned and goodbye from this lesson.


How to Install NodeJS using Angular CLI

Category : Angular 4

In this lesson, we are going to discuss How to Install NodeJS using Angular CLI. In the first part of this lesson, we will discuss, how Angular 4 works. In the second part we will tell you how to install the NodeJS, and in the third part, we will discuss how to install Angular CLI.

The following stuff are required to work on Angular 4 project.

  • NodeJS
  • Npm
  • Angular CLI
  • IDE to write code

NOTE:

This is to be noted that Npm has to be greater than 3 and NodeJS has to be greater than 4.




I will recommend you to watch all the tutorials before proceeding to read the article. Watch the below tutorials to clearly understand, How to setup environment for Angular 4. The first part will clear your mind on Angular CLI and in the Second part NodeJS will be download and Install, in third part you will learn Angular CLI installation. Let’s watch the first Tutorials.

Part 1: In this first part, you will learn How Angular 4 works. Watch the tutorial till the end and proceed to Part 2.

This is to be noted that Npm has to be greater than 3 and NodeJS has to be greater than 4.




Part 2: How to Download and Install NodeJS. Watch the tutorial till the end and move to Part 3.

Installing NodeJS

NodeJS.org of nodeJS and download the latest version. Install the package based on your OS.

The front end of NodeJS official website looks like:

nodejs

Install the required package, based on your operating system. Once NodeJS is Installed, Npm will also get installed with it automatically. Then for confirmation, check if the Npm is installed or not. For this open terminal and type –v, it will display the current version of Npm installed.

E.g:

C:\>npm –v 
5.3.0

This is to be noted that Npm has to be greater than 3 and NodeJS has to be greater than 4.




Part 3: How to Install Angular CLI. Watch the tutorial till the end. It will clear all your confusion.

Installation of Angular 4 is very easy with the help of Angular CLI. To install Angular 4, first go to the official website of Angular by typing the following URL to get the command from there. The official website of Angular is https://cli.angular.io

See the below screenshot for an example:

Angular cli

To install Angular CLI, use the following command:

Type npm install –g @angular/cli, to install angular cli on your system.

npm command

To open directory, use the following command:

Type cd directory-name, where directory-name is your project directory.

open directory

To create a new project directory, use the following command:

Type ng new my-dream-app, where my-dream-app is your project name.

create new project directory

After clicking enter, you will see that the installation will get started, see the below image to get an idea:

Installation of Angular 4

Once the installation is done. Then you can use any IDE of your choice like Atom, Visual Studio Code or WebStorm, etc.

This is to be noted that Npm has to be greater than 3 and NodeJS has to be greater than 4.




To open project, use the following command:

Type cd my-dream-app, where my-dream-app is your project directory.

open Angular 4 Project

To start Angular CLI, use the following command:

Type ng serve

ng serve command

That all you need to do. Now you can open your Angular 4 project by typing the localhost:4200 on your browser like:

How to Install NodeJS using Angular CLI

This is to be noted that Npm has to be greater than 3 and NodeJS has to be greater than 4.




That,s all we have in this lesson, How to run first app in Angular 4 is next. Thank you for now.


How to make new component using CLI

Category : Angular 4

How to make new component using CLI





Hello, and welcome to our new lesson. In this lesson, I am going to talk about How to make a new component using Command Line Interface (CLI). Using CLI for making a new component is very easy as ABC.

To make a new component, go and open Terminal from your editor. See the below image for more understanding:

make new component using CLI

Terminal

Click on Terminal and it will open in a while. Let’s see the image below:

How to make new component using CLI

open terminal

Here, you can see the directory, C:\Users\ShahzaibKamal\Desktop\first-angular-app>

Now type the following command to make a new component in app folder:

ng generate component header

You can also type a shortcut like;

ng g c header

where ng stands for angular, g for generate, c for the component, and header is a folder name. After typing the above command, the new component will be generated automatically. Let’s see the image below;

How to make new component using CLI

IntelliJ


Now, as you can see the new component has been generated automatically. You can now notice the following files in the new directory:

  • header.component.css
  • header.component.html
  • header.coponent.spec.ts
  • header.component.ts

Angular is an open source JavaScript based Framework, written in TypeScript. Angular make it easy to create single and Reactive application very fast with less code

header.component.ts

As you can see, the below file has been automatically generated.

import { Component, OnInit } from ‘@angular/core’;

@Component ({
  selector: ‘app-header’,
  templateUrl: ‘./header.component.html’,
  StyleUrls: [‘./header.component.css’]
})

export class HeaderComponent implements OnInit{

  constructor () {}
  ngOnInit() {
  }
}

header.component.html

You can see the below Built-in HTML Component. You can change it according to your requirements.

<p>
  Header works!
</p>

app.module.ts

If you see the app.module.ts file, you can see that, header component and has been automatically imported. Let’s see the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { ContentComponent } from ‘./content/content.component’;

import { HeaderComponent } from ‘./header/header.component’;

@NgModule({
  declarations: [
  AppComponent,
  ContentComponent,
  HeaderComponent
],

imports: [BrowserModule],
providers[],
bootstrap: [AppComponent]
})

export class AppModule { }

app.component.html

Now, you can call it in app.component.html. let’s see it below;

<div>
<h1>
  Welcome to {{title}}!
</h1>
<h1> {{string}} </h1>

<!—The new header component is here -->
<app-header> </app-header>
<app-content> </app-content>




Conclusion

How to make a component using CLI, is very easy. It will automatically generate all your files, and directories. All you need to have is a basic understanding of Angular. It’s as easy as ABC, just open your Terminal and type the command ng generate component new-component-name, and it will generate it automatically.

That’s all we have in this lesson for now. If you want to make Component Manually just click on this link: Create a Component in Angular 4

In Next lesson we will be talking about How to Nest component. So stay tuned and goodbye for now!



Suggested Source

ng-book: The Complete Guide to Angular 4

You can buy this book, to master Angular 4 framework in less time without beating your head against a wall. The book also contains code examples with each chapter. This will clear all your confusion and will clear your concept on Angular 4.