Featured

    Featured Posts

Angular Tutorials 2:Angular Components


Angular  components
What is a component in Angular 


 §  A component in Angular is made up of these 3 things.

1.     Template

2.     Class

3.     Metadata

 §  A component is made up of three parts the first is a template which represents the view this is created using HTML in will be the user interface for your application.

 §  we have a class which is nothing but code that supports the view this is created using typescript class like any other programming language contains data properties and methods that can be used to control the logic of the view example we can have a method to show or hide an element based on the value of a property.

 §  Finally a component also had the metadata attached to it and this is the information that angular need to decide if the particular class is in fact in angular component just a regular class data is defined using a decorator which is a feature in typescript decorator is just a function that provide information about the class attached to it and for component.

 §   We use the Component decorator provided by Angular to add metadata to  

  the class.

 §  If you put together a template class and some metadata, we get an angular component.

 §  A class becomes an Angular component, when it is decorated with the Component decorator.

 §  let me go back to Visual Studio code and open the file app.component.ts

 §  We have a class with the name of the class is AppComponent this class currently contains one property which is the title and does not contain any methods keeping it simple to do this class.



 §  We have the meta data attached in the form of a decorator and to be more specific the component decorated.



 §  Component decorated is basically a function that attaches to the class right below and in our case, it is attached to the AppComponent class and it is this decorated the tells angular hey this is not a plane class this is a component.



 §  Component decorator contains both the metadata and the template which represent the view so as the part of the metadata we have a selector, template URL and style URL and selector is basically a custom HTML tag that can be used to represent this component. We can use this selector as a directive where we want to use this component.



 §  When you specify a selector in your Html angular renders  the component template in its place for example you can see the selected for AppComponent is app root and in  index.html  file it is used as a custom HTML tag so app-root in the opening and closing tag so angular renders the AppComponent template when it comes across this app root selector but what exactly is the template for this component is defined using the template URL Template URL points to an HTML file that represents the view for this component and if it take a look app.component.html template we have welcome to followed by the title in double curly braces in the title is nothing but the property in our class which is Gravity4Tech.



 §  So when you run application this HTML which is in app.component.html with replace in the index HTML file specified this component selector so that is how the HTML template gets rendered in the browser and finally we can have styles that apply only to this component and that is specified using the style URLs property.



 §  To CSS files right now this file is empty but you can style your component using this file that is basically the structure of a component.



 §  How you included new Component in your application but let's try to improve our understanding of components

 §  Let's create a new component by making use of angular CLI command.

     ng g c test
G for generate c for component followed by name the component is called as TestComponet

 §  after complete execution of this command a couple of things happen when we can see them in the integrated terminal itself you can see that four new files were created and also there was an update to the app module let's a look and see what happens in the folder itself.

 §   In the app folder a new folder test is created specifically for this component with this folder the typescript file the HTML and CSS are created a spect file is also created don’t really use now


Component Example : -

// Component decorator is provided by the Angular core library, so we
// have to import it before using it.
import { Component } from '@angular/core';

// The class is decorated with Component decorator which adds metadata
// to the class. We use the @ symbol to apply a decorator to the class
@Component({
    // component has several properties. Here we are using just 2. For
    // the full list of properties refer to the following URL
    // https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
    // To use this component on any HTML page we specify the selector
    // This selector becomes the directive <my-app> on the HTML page
    // At run time, the directive <my-app> is replaced by the template
    // HTML specified below
    selector: 'app-root',
    // The template contains the HTML to render.
     templateUrl: './app.component.html',
   // you can style your component using this file
    styleUrls: ['./app.component.css']

})
// export keyword allows this class to be exported, so other components 
// in the application can import and use it if required
export class AppComponent {
    // name is a property and the data type is string and
    // has a default value "angular"
    name: string = 'Angular';
}

app.component.html
Notice in the HTML
  // we have a data-binding expression specified by double curly
  // braces. We have a defualt value "Angular" assigned to "name"
  // property in the AppComponent class. This will be used at runtime
  // inplace of the data-binding expression
hello{{name}}


Notice in the index.html page, we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced with the HTML we specified using the selector property in the component decorator.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ComponentDemo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>







author

Author Name

Author Description!

Get Free Email Updates to your Inbox!

Post a Comment

www.CodeNirvana.in

Powered by Blogger.

About

Site Links

Popular Posts

Translate

Total Pageviews