Components In Angular 5 : Part Two (Properties Of Component)

We know that @Component decorator functions take an object, and this object contains a lot of properties. So, in this article, I am trying to explain the component's object property with examples.

We know that @Component decorator functions take an object, and this object contains a lot of properties. So, I am going to explain these properties in this article.

Before reading about these properties, I suggest you go through part 1:

• Component In Angular 5 – Part One

Template and TemplateUrl Properties

We can render our HTML code inside the @Component decorator in two ways.

 

Inline Template

In this, we will find HTML code inside the TypeScript file. This can be implemented using “template” property.

 

Use the following code in “app.component.ts” file.

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

@Component({
  selector: 'app-root',
  template:`
  <H1>Template</H1>
  <hr>
  <div> Template inside typescript file </div>`
})
export class AppComponent {
  title = 'app';
}

 This will be the output of the above code.

 

 

External template 

In this, we will find a separate HTML file instead of finding HTML code inside the TS file. Here, the TypeScript file contains the path of that HTML file with the help of “templateUrl” property.

Use the following code in “app.component.ts” file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';
}

Use the following code in “app.component.html” file.

<H1>templateUrl</H1>
<hr>
<div> Template outside typescript file. An implementation of templateUrl property. </div>

Output

 

 

Points to remember about template properties

• Any of these two must be presented in your component either to link to an external template (i.e. templateUrl) or an inline template (i.e. template). So, this is one of the properties you have to have at all times.
• If we use both properties “template” and “templateUrl”, then it will generate errors.

Styles and StyleUrls Properties

 

Similarly, we can render our styles, i.e., CSS code inside the @Component decorator in two ways.

 

Inline Style

In this, you will find CSS code inside the TypeScript file. This can be implemented using “styles” property.

Use the following code in “app.component.ts” file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles:['h1{color:#0086dc}','div{font-family: Arial; color:#f75454}']
})
export class AppComponent {
  title = 'Component Properties';
}

Use the following code in “app.component.html” file.

<H1>styles</H1>
<hr>
<div> Styles inside typescript file. An implementation of <i>styles</i> property,this property takes an array of strings that contain CSS code. </div>

Output

 

 

External styles 

In this, we will find a separate CSS file instead of finding CSS code inside the TypeScript file. Here, TypeScript file contains the path of that stylesheet file with the help of “stylesUrls” property.

Use the following code in “app.component.ts” file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Component Properties';
}

 Use the following code in “app.component.html” file.

<H1>styleUrls</H1>
<hr>
<div> Styles outside typescript file, called external styles. An implementation of <i>styleUrls</i> property,this property takes path of style sheet where css code is present </div>

Use the following code in “app.component.css” file.

h1{color:#f75454}
div{font-family: Arial; color:#0086dc}

Output

 

 

Points to remember about styles properties

• It is not mandatory to use any of the properties. If we don’t want to implement any styles on a webpage, then we can leave both the properties.
• If we use both properties, “styles” and “styleUrls”, then it always renders the style from external file i.e. it uses “styleUrls” property.

 

preserveWhitespaces property

preserveWhitespaces : By using this property, we can remove all the whitespaces from the template. It takes a boolean value, i.e.:

If false, then it will remove all whitespaces from the compiled template.

If true, then it will not remove whitespaces from the compiled template.

Use the following code in app.component.ts file.

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

@Component({
  selector: 'app-root',
  template: `
  <H1>preserveWhitespaces</H1>
  <hr>
  <div> This property takes boolean value, i.e. if it set to false, then
  it will not remove space between buttons  </div>
  <button>Button1</button>   <button>Button2</button>
  <button>Button3</button>   <button>Button4</button>`,
  styleUrls: ['./app.component.css'],
  preserveWhitespaces:false
})
export class AppComponent {
  title = 'Component Properties';
}

 

viewProvider Property

viewProvider

When we want to use a class in our component which is defined outside the @Component() decorator function, then, first of all, we need to inject this class into our component, and we can achieve this with the help of "viewProvider" property of a component.

Use the following code in "app.component.ts" file.

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

class MyProvider{
 constructor(){
 console.log("Hello! Try to understand provider property");
 }
}

class MyProvider1{
 constructor(){
 }
 getString(name){
 console.log("Hello! Try to understand provider property1" +name);
 }
}

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 viewProviders:[MyProvider, MyProvider1]
})
export class AppComponent {
 constructor(public obj:MyProvider, public obj1:MyProvider1){
 obj1.getString("Mahesh");
 }

 title = 'app';
}

In this, we have created two classes, i.e., "MyProvider" and "MyProvider1". If we want to use these classes in our component, then first inject your class name in Provider.

viewProviders:[MyProvider, MyProvider1]

Then, create an object into the constructor.

constructor(public obj:MyProvider, public obj1:MyProvider1)

So, with the help of these objects (obj, obj1), we are able to use methods of MyProvider and MyProvider1 class into our component.

 

Output

Conclusion

 

As we know that components are very important in Angular, after having read this blog, we can say that we have the knowledge of the template, templateUrl, styles, styleUrls, preserveWhitespaces, and viewProviders components.

I will explain the remaining properties in my next articles.