Working with Angular 5 Components

Hey all. From the previous article we got to know the way of creating an Angular5 Project.Today we will be looking forward on Angular Components.

In Angular, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.
As an example we  can create separate components for header, sidebar and footer of a web project. So that we can easily call them anywhere in our project.


First lets look at the Angular Directory Structure.

In here all the workings in the project is done in the src folder .If we go through the src folder we can see an app folder in it.components are there in the app folder.


The front view of the project is designed from the app.component.html file which is in the app folder.All the css changes are done by css file in it.


Now create a directory to store all components you create in the app folder.The directory structure will looks like,



Now lets create a component to add a navbar to the project. So the comand
 will be,


Here the navbar is the component name. as a short form you can use the command as,
ng g c navbar

component for the navbar will be created in the component folder and the directory structure is given below.


Template of the  navbar should be added to the navbar.component.html file. Here I am using Webstorm as my text editor. You can install it from here if you have not intalled it yet.

Creating the Navbar

As the template I am obtaining it from Bootstrap. Copy the code and paste it on navbar.component.html file. Then make changes as you need.

Then you should enable bootstrap in your angular project. Fir this copy the CDN link from Bootstrap CDN and paste it on the head of index.html file.




Now you should copy the selector from navbar.components.ts file which will looks liks below,

app-navbar is the select that we used to call the navbar in the app.component.html file.You can use the navbar anywhere you need by calling using the selector.

 <app-navbar></app-navbar>

Now save it and run the application. So you will get an output as given below.

 Now you can add any other component very easily. 

Comments

Post a Comment

Popular posts from this blog

Working with Buttons in Android Studio

Image
From the  previous article  we went through a basic introduction on Android Studio.This article help you to get to know about Buttons in android studio.Open up Android studio and start. Given below is the edited code of the text view that I have used. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="Hello World!" android:textSize="36sp" android:id="@+id/textView" /> Go to your palette in the project. Then drag and place the button where you need in the content. Then move onto your text view. There you can see that the code for the button has been activated. There is an ID given to the button to identify a particular component which is always unique. You can give name to the button in android.text. Now give a background color to the button. Method 1 : Using inbuilt colors android: ba...
Read more

Java Part 2 :How to Install Java

Image
This article will show you how to set up the java environment in your computer. For this you will have to install below set of software. Java Standard Edition (SE) Developer's Kit (JDK) Netbeans Integrated Development Environment (IDE) Install Java Standard Edition (SE) Developer's Kit (JDK) Installation can be done from the following link. http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html Once you click the link you will get window given below. From this window you can download the software according to your operating system. But in here make sure to accept the license agreement before you start downloading the software. Netbeans Integrated Development Kit Netbeans integrated development kit can be downloaded using the following link. https://netbeans.org/downloads/ But for the easy installation, you can download and  install Java JDK and Netbeans from the following link at once. http://www.o...
Read more

Ruby - Dynamic, Open source programming language

Image
Hey all... CodeCircle is back with a new programming language. This article is intended to give you a basic introduction to Ruby programming language. Ruby is a Dynamic, Open source programming language which is mainly focused on simplicity and productivity. This language is completely a free language which is developed by  Yukihiro Matsumoto.  This article will help you to get a fresh start in Ruby. "Hello World...!" As the first command in Ruby, we will look how to print a statement in Ruby. Basically, the print statement can be printed using two methods, 1) puts method The built-in method puts used to print a statement. The strings are printed using single or double quotes. Given below is the command used to print the statement "Hello World...!". puts "Hello World...!" Try this command 2) print method Another built-in method is Print which can be shown as below. print "Hello World...!" Try this command In Rub...
Read more