Angular Component Decorator

 What is the Component Decorator in Angular?

Whenever you want to make a class as a component, then you need to decorate that class with @Component decorator.

 Properties of Component Decorator:

1. changeDetection – change the detection strategy used by this component.
2. templateUrl – URL in an external file that contains a template for the view.
3. template – template defined inline template for the view.
4. viewProviders – list of providers available for this component and the view of their children.
5. animations – animation’s list of this component.
6. moduleId – Module ID ES / CommonJS of the file in which this component is defined.
7. encapsulation – strategy of style encapsulation used by this component.
8. styleUrls – URL list for style sheets that will be applied to the view of this component.
9. interpolation – custom interpolation markers used in the template of this component.
10. styles – styles defined online that will be applied to the view of this component.
11. preserveWhitespaces – Using this property, we can remove all whitespaces from the template.
12. entryComponents – entry Components is the list of components that are dynamically inserted into the view of this component.

Working with Bootstrap Multiple Component

Angular supports bootstrapping multiple components, in real time it is not a recommended practice due to performance issue, the same can be achieved using nested component

HeaderComponent.ts

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

@Component({

  selector: 'app-header',

  template: `

  <table style="margin:30px">

   <tr>

   <td>

     <img src="../assets/uday.png" height="120" width="120">

   </td>

   <td>

     <h2>Dot Net By Rajakonda Uday..</h2>

     <h2>Hyderabad</h2>

   </td>

   </tr>

  </table>

`,

styles: [

"td{padding:10px},h2{color:blue}"

]

})

export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {

  }

}

Body Component.ts

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

@Component({

  selector: 'app-body',

  templateUrl: './body.component.html',

  styleUrls: ['./body.component.css']

})

export class BodyComponent {

}

BodyComponent.html

<div>

    Welcome To My Site.

    ...

     </div>

Output

Step by Step to Angular Set up

I am writing this article, as so many people  have been asking me the steps to set up angular

Software Requirements for Angular Environment Setup:

In order to develop any higher version application on your machine, the following things are required

1. IDE (for writing code) 
2. Node.js (Node.js is an open-source cross-platform javascript run-time environment)
3. Npm (NPM is node.js package manager for javascript programming language. It is automatically installed when we install node.js)
4. Typescript (It is the programming language)
5. Angular CLI (It is a tool that allows us to create a project, build and run the project in the development server directly using the command line command)

1 IDE(Visual Studio Code]--Install Visual Studio Code

Below is the link

https://code.visualstudio.com/

2 Next we need to Install Node Js

 Install NodeJS

Follow the link - https://nodejs.org/en/download/

Download the node.js installer for Windows and install it.

Download the node.js installer for Windows and install it.

To check the installed version of Node.js, open the command prompt.

Step 3. Install TypeScript

“npm install -g typescript” and run it on command prompt

Step 4     Angular

First , we need to install Angular CLI with the below Command

npm install -g @angular/cli

Note:

You can install packages from the below site

https://www.npmjs.com/

npm tool can install node packages in 2 ways
  1.local package
This will be specific to a folder, this is mostly used for project level packages, this project      level packages will be stored into node_modules folder and package names will be
       placed into package.json file

    syntax:
       project1>npm install[i] <packagename>

    project1
       node_modules
            packages
       package.json---->   packagenames

2.global package
      This will be available through out the system,this is mostly used
         for tools installation
       eg: typescript compiler, angular cli,..

    syntax:
        npm i <packagename> -g

Imp Node Packages

1.@angular/core
       this is important core package of angular, this provides collection
       of functions, classes and interfaces required for angular app development
    eg:

    decorator functions--->Component(..),NgModule(..),..
      classes          --->EventEmitter,..
     interfaces        --->OnInit,OnDestroy,..

 2.@angular/platform-browser
        this is providing BrowserModule,this should be imported into AppModule,this
        BrowserModule is required for browser to support angular module execution

 3.@angular/platform-browser-dynamic
        this is providing platformBrowserDynamic class with BootstrapModule method,this
        method is used to load AppModule to start angular app execution 
   eg:
      platformBrowserDynamic().bootstrapModule(AppModule).

4.@angular/forms


create main startup file to load appmodule
  eg: main.ts
         |
 




 

Angular CLI [Command Line Interface]

 *Angular CLI is a command line tool to develop,manage,unit test and production build of

 Angular project easy way

Angular CLI will make development easy and faster by reducing lot of manual coding

Angular CLI will follow all the naming conventions of angular

 Example:
   component file---> <name>.component.ts
   module  file  ---> <name>.module.ts

Angular cli can be installed using node package
 [goto command window]
   >npm i @angular/cli -g

   >ng version
    Angular CLI 13.0.3

Angular CLI is nothing but "ng" command,this provides set of options
  1.new   option
  2.serve option
  3.generate option
  4.test  option
  5.build option
  6.lint  option

Working with Multiple Components in Angular

Requirement is 

app1 project
        |
    headercomponent---> without css file   --> only ts file
                        without html file 
                        without spec file

    logo  caption[design]


    bodycomponent ----> with css file      --> 3 files
                        with html file
                        without spec file
    welcome to ..

Before that , let us create a new folder for this Example. Also install angular cli with the below command npm install -g @angular/cli

First, let us create a new Component

ng g c header --flat --inline-template 

Now go to headerComponent.ts and write the below Code

@Component({
  selector: 'app-header',
  template: `
  <table style="margin:30px">
   <tr>
   <td>
     <img src="../assets/logo.gif" height="120" width="120">
   </td>
   <td>
     <h2>Dot Net By Rajakonda Uday..</h2>
     <h2>Hyderabad</h2> 
   </td>
   </tr>
  </table>
`,
styles: [
"td{padding:10px},h2{color:blue}"
]
})

Now, goto appModule.ts

*goto index.html [src folder]
   ...
 <body>
  <app-header></app-header>  [refer bootstrap component selector]
</body>



















Output















Let us create a another component that is body Component 








Now, go to bodycomponent.html 













bodycomponent.css













Now, make changes to appmodule.ts





















Index.html
<body>
  <app-header></app-header>
  <app-body></app-body>
</body>


Output