Angular Components

 What are Angular Components

Component  is technically a class that contains information, which specifies the presentation and functionality.

Components are the building blocks of Angular Applications.

OR

Component is a view[webpage] to provide user interaction for accepting data (or)
 displaying data

    (or)
Component is a class to combine related fields, logic[methods],markup and styling as one unit

A component get its behavior from component based class which is defined in @angular/core library.

Angular component internally use framework like MVC Model view controller ,MVVM.

View: It declares the application UI

Controller: It defines the application specific logic. In Angular a controller is defined in Typescript that is trans compiled into Javascript.

A controller is configured with meta data , that specify the view in html and css and the logic in the typescript class.

A template consists of

A component is extending directive. Angular directive comprises of information that enables communication between html and angular to convert the static DOM into dynamic DOM.

 A typescript class applied with "component decorator with metadata" will be
 identified as component class by angular

Syntax:
    @Component({
            selector:'..',
            template :'..',
            templateUrl:'..',
           styles   :[..],
           styleUrls     :[...]
      })
   export class <classname>Component
   {
       fields
         +
       methods[logic]
   }

Component class name should end with "Component" keyword, it is not a mandatory, but recommended practice

@Component({

  selector: 'app-root',

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

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

})

selector: It specifies the directive name which is used to access the component.

HeaderComponent                                  AboutComponent
         |                                                                |        
    selector:'app-header'                             selector:'app-about' 
    template:`                                             template:`
             <h2>caption</h2>--------- --- >       <app-header></app-header>
            image logo                                       <h2>display company profile</h2>
               `                                               

                                                    contact Component
                                                         |
                                                   template:`
                                                          <app-header></app-header>
                                                           ...
                                                            `
  
selector can be anything, recommended is app-component name[app-header,..]
selector name acts like a tag name to a component

template: It defines the mark up to be rendered.

templateUrl: It specifies the external file that contains the mark up to be rendered.

Difference between template vs templateUrl

Template will mix markup[html] with logic part by placing into ts file, This doesn't
allow parallel development of design part and logic part.

Template URL will separate markup[design part] from ts file into html file, this allows
     parallel development of design part and logic part  

Template doesn't provide intellisense  and autocompletion  

Template URL with html file will provide intelligence and autocompletion.

Template doesn't provide readability
Template URL provides readability

styles: It defines inline styles for elements.

StyleURLs: It specifies the css file that contains the styles to be used for component.

Difference between styles vs Styles URLS

Styles will be unique to a component.
StyleURL CSS Files will be reusable across components.

Styles will not provide intellisense and autocompletion.
StyleUrls will provide intellisense and autocompletion


Styles doesn't provide readability
StyleUrls provides readability.

Styles supports normal css
StyleUrls supports different stylesheet formats[css,scss,sass,stylus]

Adding a component Explictity

Go to the app folder

Add New File(+ icon)

Name it as "HomeComponent.ts"

Write the below code in the HomeComponent.ts

import { style } from "@angular/animations";

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

@Component({

    selector: 'app-home',

    template: `<h2> Pawan Kalyan Fans  </h2>`,

    styles: ['h2 {color:red }']

  })

  export class HomeComponent {

  }

Go to app.module.ts and register component

Now, the component need to inject in Index.html File

Goto Index.html and add component to the page

Adding a component with separation concerns i.e separate the code and UI.

Add a new folder into app folder by name "Login"

Add following files into Login Folder

-login.component.ts

-login.component.html

-login.component.css

-login.component.html

<fieldset>

    <legend>Login</legend>

    <dl>

        <dt>User Name </dt>

        <dd><input type="text"></dd>

        <dt>Password</dt>

        <dd><input type="password"> </dd>

    </dl>

    <br>

    <button class="buttonstyle">Login</button>

</fieldset>

-login.component.css

.buttonstyle {

    background-color:green;

    color: aqua;

}

-login.component.ts

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

@Component({

    selector: 'app-login',

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

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

  })

  export class LoginComponent {

  }

Goto appmodule.ts

Now go to index.html

Output:

Note: we can generate a component with angular cli commands

ng generate component register

or

ng g c register

If you want to ignore the spec file , then use the below command

ng generate component cart --skip-tests

1.ng new <projectname>
   this will create angular project by supporting component creation 
   with all the files[4 files--> ts,html,css and spec.ts]
                                                   |
                                                 unit test file
  Example: goto command window
      >ng new app1 --dry-run
       would you like to add angular routing? n
       which stylesheet format would like to user: press enter
        css[default]
        Scss
        Sass
        Less
                ....
            app.component.ts
            app.component.html
            app.component.css
            app.component.spec.ts

   note:
     dry-run option will show project structure[files] without creation

1.ng g c <name>
   
This will create a new folder with component files based on angular.json
setting, the folder will created inside app folder

  Go to terminal [app1 folder with vs code]
   1 ng g c demo --dry-run
      

2 ng g c <name> --flat
       This will create component files into app folder without new folder
       creation

    >ng g c demo --dry-run --flat
       



  

3.ng g c <name> --inline-style true | false
     This will override project level setting[angular.json setting]

       true--component without css file
       false--component with css file

  4.ng g c <name> --inline-template true | false

      true--component without html file
      false--component with html file

     >ng g c demo --dry-run --flat --inline-template   

  5.ng g c <name> --skip-tests true|false

       true--component without spec file
       false--component with spec file

ng g c demo --dry-run --flat --skip-tests false

Note:

The most important point that you need to keep in mind is that in Angular application everything is a component. That means the components are the basic building blocks of an Angular application. The most important advantage of this component-based development approach is that it provides support for code reusability. That means you can reuse the same component in multiple places. This Component-based development approach also provides great support for unit testing the Angular application.