Category Archives: angular5

Create a new component in angular

If you are Not aware of basis environment set up and Hello world of angular please go through below links for the context.

1 . https://javaquicky.com/p/angular-456-set-up-environment.html
2 . https://javaquicky.com/2018/07/17/angular-5-hello-world-step-by-step/

Above links help us in creating ready made application which angular CLI provide us but now we want a component of our own.

Step 1:  

Creating a Custom Component

navigate to your folder structure where you want to create your custom component
and then run below command

ng g component customHelloWorld

like this :

D:Rakesh_kumar_SinghaniaAngular5HelloWorldhello-world-appsrcapp>
ng g component customHelloWorld

This command will create your component and also it make sure to mark an entry in your app.module.ts file.

app.module.ts — This file holds all the source required by the project which include all the imports of the components.

below is the snapshot of generated files :

Beauty of command ng g component customHelloWorld is 

This command generated 4 for the component :

1 . HTML file of your component
2. Test file for your component
3. TS file for writing your logic.
4. CSS file for styling.


Step 2:  


Open auto generated file custom-hello-world.component.ts.

@Component({
  selector: 'app-custom-hello-world',
  templateUrl: './custom-hello-world.component.html',
  styleUrls: ['./custom-hello-world.component.css']
})
export class CustomHelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {   
   console.log("hello");
  }
}

and and modify custom-hello-world.component.html according to your need.

<p>
  custom-hello-world works!
</p>

Below code is important in sense of mapping your HTML file and CSS file specific to this component.

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






So whenever you use app-custom-hello-world selector in any of your HTML it will render the
HTML part of custom-hello-world.component.html.



Lets use app-custom-hello-world  selector tag in our app.component.html.

app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to Custom component {{ title }}!
  </h1>
 <app-custom-hello-world></app-custom-hello-world>
</div>

Start the server using

 ng serve

Hit on the url http://localhost:4200

Output :


89 total views, no views today

Angular 5 Hello world step by step

Step 1: Prerequisites

Install Node.js & npm

https://javaquicky.com/p/angular-456-set-up-environment.html

Install Angular CLI

Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself

In order to install Angular CLI open Node.js command prompt/command prompt and run the below command

npm install -g @angular/cli

Install Code Editor

There are multiple code editors available in market

1. Microsoft Visual Code Studio
2. Brackets
3. Notepad++,
4. Sublime Text

As I m Fond of eclipse so I have installed angular plugin in eclipse as Angular editor.


Step 2: Create Project

Lets build our First Angular 5 Hello World application

Create a new folder with folder name “Angular5HelloWorld” anywhere you want.

Open command prompt and navigate to the folder.

Use the ng new command to create our Hello World Angular Project ng new hello-world-app

Ng stands for aNGular. NG is a core module, and this module contains all the directives that comes built in with the AngularJS library file.

D:Rakesh_kumar_SinghaniaAngular5HelloWorld>ng new hello-world-app

In case you get error that ‘ng‘ is not recognized command

To solve that go to :

Control Panel > User accounts > Change my environmnet variables

and add the path to your AppDataRoamingnpm, in my case it was

C:UsersrakeshkumarAppDataRoamingnpm

Above command ng new helloworldapp creates a MAGIC…!!

This command add 1102 packages and all required dependencies for your first project.

Now your project ‘hello-world-app’ is successfully created.

Step 3: Run our first application

Navigate to your newly created project and run below command to run your application.

D:Rakesh_kumar_SinghaniaAngular5HelloWorldhello-world-app>ng serve

This command will start the server and will launch the default Angular Application build by Angular CLI.

If you see above screen after running command then congratulations everything is fine with your application and your are good to go.

Default url to launch application is : http://localhost:4200/

Step 4 :Output



Next :create a customize component
https://javaquicky.com/2018/07/17/create-a-new-component-in-angular/

89 total views, no views today