Components:

#

Components in Angular play a pivotal role in enhancing reusability and Modularity in web pages.

• A typical component comprises:
  1. HTML File: Defines the structure and layout of the component, encapsulating the visual elements.
  2. CSS File: Manages the styling, ensuring a cohesive and visually appealing presentation for the component.
  3. TS File: Contains the TypeScript code, including the component’s logic, data, and interactions.
  4. Spec.ts File (for Testing): Ensures the reliability and robustness of the component through unit testing, maintaining code quality. In essence, Angular components play a crucial role in creating scalable, maintainable, and testable web applications by encapsulating functionality, styling, and structure.

Generating/Creating Angular Components:

#

CLI:

#

• Utilizing the Angular CLI simplifies component creation:

ng generate component component_name

Manual:

#

• For a hands-on understanding of Angular components, follow these steps:
  • Create a folder (optional but recommended).
  • Manually generate TypeScript, HTML, and CSS files in the same folder.
  • Integrate the component into the module.ts file to inform Angular of its existence.
  • Place the component selector strategically within the application.
• TS(Component file):

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

//Component section
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})

//Class Section
export class AppComponent {
/Component logic goes here
}

Note: Embrace the manual approach at least once to gain a deeper understanding of Angular component structure.

Understanding Components: A Selector, HTML Template, and Styles

#

1. selector

2. html template

3. styles

   Selector:

   #

   • The selector is similar to a html class & It can be declared and used in multiple modules.
   • Selector Variations: Unleashing the Power of Component Identification

   1. Default:

   #

   • TS Component:

     // Component Selector
     @Component({
       selector: 'app-component'
     })
     

   • HTML Usage:

     <app-component></app-component>
     

   2. Attribute:

   #

   • TS Component:

     // Component Selector
     @Component({
       selector: '[app-component]'
     })
     

   • HTML Usage:

     <div app-component></div>
     

   Note: Any HTML element can be used, not limited to div.

   3. Class:

   #

   • TS Component:

     // Component Selector
     @Component({
       selector: '.app-component'
     })
     

   • HTML Usage:

     <div class="app-component"></div>
     

     Note: Any HTML element can be used, not limited to div. These selector variations offer flexibility in integrating components into your Angular application, catering to different styling and structural requirements.

HTML Template

#

• Crafting the Visual Essence of Components

1. templateUrl:

#

• A reference to an external HTML file.
• Example:

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  

2. template:

#

• A direct inline definition of HTML code.
• Example:

  @Component({
    selector: 'app-root',
    template: '<h1>Hello</h1>'
  })
  

  Note: Multi-line HTML code can be written using backticks (` `).

CSS Template

#

• Crafting Stylish Components

1. templateUrl:

#

• A reference to an external CSS file.
• Example:

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  

2. styles:

#

• Inline styling directly within the component.
• Example:

  @Component({
    selector: 'app-root',
    template: '<h1>Hello</h1>',
    styles: ['h1 { color: red; }']
  })
  

  Note: Multi-line CSS code can be written using backticks(` `). As it takes an array, you can pass CSS files or an array of CSS codes.