‘Ng’ is the contraction of Angular. The framework itself is named after the angular parenthesis of HTML elements. Angular components are used like HTML elements.

fig: rudimentary structure of a typical web page

An Angular App is a collection of Modules, called NgModules.

• A root module exists to handle the app launch
• Other supporting feature modules may exist

When a new app is generated in the CLI using ng new, a root module is created through the file app.module.ts, which makes the class AppModule available to the app.

---

AppModule tells Angular how to assemble components:

• All Components (including the base AppComponent) and feature modules which are to be part of the app should be imported in the app.module.ts file
• It could be from the angular core library, other libraries, or app’s local folders
• app.module.ts has an @NgModule function. In the input JSON of this function:
  • All app Components are declared in “declarations”
  • feature modules imports are declared in “imports”

fig: rudimentary structure of an Ng app

---

Components are the fundamental building blocks of Angular applications. They:

• render app visuals to screen,
• listen for user input, and
• respond to that input

Application Shell is the visual render of the app:

• AppComponent: the root Angular component renders this Shell 
• AppComponent is implemented across 3 files:
  • app.component.ts — the component behavior script, written in TypeScript
  • app.component.html — the component’s HTML template
  • app.component.css — the component’s private CSS styles
• app.component.ts has a decorator function that sets the root HTML and CSS file

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

Creating a new Component in the CLI:

• ng generate component “component-name”
• Creates new folder in ./src/app/ named “component-name”, which houses the Component’s .ts, .html and .css files

structure of a typical Ng Component

• The .ts file has a decorator function:

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

  where:

  • selector: css-selector of this new Component
  • templateUrl: new Component’s html layout
  • styleUrls: array of its css files
    
• This decorator function makes a Component unique among other components
• A Component is loaded in the Shell like HTML elements by placing <"cssSelector"></"cssSelector"> in the AppComponent’s .html file

Components Properties:

• Component properties are defined in the class exported by the Component
• {{property-name}} is used in HTML to call the property value

Life Cycle Hooks:

• NgOnInit() { }: function that runs when Component is initialized
  • Created automatically in a CLI generated Component

---

Pipes:

• A text-formatting tool to quickly apply text styles
• Similar to CSS classes, but specifically for formatting text rendering
• Example: <h2> {{property.name | uppercase}} Details </h2>
  • | is the pipe operator
  • to make property.name part of <h2> element uppercase

---

Directives:

• Similar to attributes of HTML elements
• Appends additional functionality to HTML elements
• Core Directives:
  • *ngFor: Repeater Directive (similar to for loops)
  • *ngIf: Conditional Directive (if else conditional)
  • [class: some-css-class]=“some condition”: conditionally apply CSS
  • (click)="save()”: event triggers function
• Additional Directives are made available across app Components by importing relevant External Modules

One-way property binding:

• Directives for Components
• Similar to assigning values to attributes in HTML elements
• Example: <app-component [property]="input-value"></app-component>
  • [component-property]="input-value":
    • Is the one-way property binding of the input-value property of the parent Component to a property of the child Component

---

Reading:

• Project File Structure
• Architecture Overview

---