Directives and Components

• Directives are ‘enhancements’ for elements.
• They can change the configuration (properties, attributes), styling, or behaviour of elements.
• Directives don’t have templates (this is the main differences with components — Components are Directives with a template).

Two types of Directives: Attribute Directive, Structural Directive

Attribute Directives

// Directives that changes attribute.
<input type="email" name="email" [(ngModel)]="email" />

Structural Directives

• shortand structural directives: e.g. *ngIf, *select’.
• can only apply one structural directive per element when using the shorthand syntax.
• <ng-container> can be used when to create wrapper layers when multiple structural directives need to be applied around the same physical DOM element or component, which allows the user to define the nested structure.

// Directives that changes DOM.
<p *ngIf="isActive">Show this line when the status is active.</p>

// np-template by default is not rendered, it would render when appAuth is user in the following example
// Structural Directive and Syntactic Sugar can be used interchangeably
<ng-template appAuth="user">
  <p>Welcome!</p>
</ng-template>

// alternative
<p *appAuth="user">Welcome!</p>

Build-in Directives and Custom Directives

Build-in Directives

When using ngModel in Forms, in dev-tool, we can see classes with ‘ng’ prefiexes added to this element.

// ngModel here is a build-in directive
<input name="title" ngModel />


// ngModel can be used with two-way binding 
<input type="email" name="email" [(ngModel)]="email" />

Custom Directives

• We can create custom attribute directives, and custom structural directives.
• Custom directives are way less than components been used in a project.

Custom Directives Example (highlight content on mouse hover)

1. create custom directive file

// highlight.directive.ts

import { Directive, ElementRef, inject } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()',
  }
})
export class HighlightDirective {
  elementRef = inject(ElementRef);

 onMouseEnter() {
    this.highlight('gold');
  }
  onMouseLeave() {
    this.highlight('');
  }
  private highlight(color: string) {
    this.elementRef.nativeElement.style.backgroundColor = color;
  }
}

2. import created directive in component ts file, and implement in the target code section

import {Component, input} from '@angular/core';
import { Movie } from '../model/movie.model';
import { HighlightDirective } from "../highlight.directive"; //import custom directive

@Component({
  selector: 'app-movie-item',
  template: `
    <div class="movie-item" appHighlight> //implement
      <div>
        <h4>{{ movie().title }}</h4>
        <small class="subtitle">
          <span>Release date: {{ movie().release_date }}</span>
          <span>Budget: $ {{ movie().budget }} million</span>
          <span>Duration: {{ movie().duration }} min</span>
        </small>
      </div>
      <button>Details</button>
    </div>
  `,
  styleUrls: [ 'movie-item.component.scss' ],
  imports: [HighlightDirective] //add as imports
})
export class MovieItemComponent {
  movie  = input.required<Movie>();
}

Key words: input(), one-way data flow, parent to child component;

Doc: Accepting data with input properties • Angular

Mental Model

drinks-list is parent component, drink-item is child component.

// component structure

drinks-list
  drink-item
  --drink-item.html
  --drink-item.scss
  --drink-item.ts
--drinks-list.htm
--drinks-list.scss
--drinks-list.ts

Use property binding to take the value of drink from parent component, and pass it into the child component’s drinkData input. drink exist in parent component’s TS file.

Parent component own the data, child component using the data through input(). This is a one-way data flow.

Latest vs Older version:

export class DrinkItemComponent {
  // latest signal-based input() function
  drinkData = input<Drink>();

  // older decorator-based @Input() 
  @Input() drinkData: Drink;
}

Code Example

Parent component:

// drinks-list.html

<div class="container">
  <app-drink-item [drinkData]="drink"/>
</div>

Child component:

// this is HTML and TS in child component

import { Component, input } from '@angular/core';
import { Drink} from '../model/drink.model';


@Component({
  selector: 'app-drink-item',
  template: `
    <div class="drink-item">
      <div>
        <h3>{{ drinkData()?.title }}</h3>
        <small class="subtitle">
          <span>Brand: {{ drinkData()?.brand }}</span>
          <span>Size: {{ drinkData()?.size+ ' ml'}}</span>
          <span>Price: {{ '£' + drinkData()?.price}}</span>
        </small>
      </div>
      <button>Details</button>
    </div>
  `,
  styleUrls: ['drink-item.component.scss']
})

export class DrinkItemComponent {
  drinkData = input<Drink>();
}

Recognising the power of teamwork

I started SoC at the beginning of Sep 2023. In week 4 we built a RESTful API for our Friday hackathon. These are some of the topics we learned in the first four weeks:

• Week 1: learning how to learn, computational thinking, Git&GitHub, agile methodology
• Week 2: JavaScript — loops, function & scope, arrays, objects
• Week 3: Front-end — DOM, debug, event, navigating data, fetch API
• Week 4: Back-end — Node.js, npm, CRUD functionality, Express.js, RESTful API

The Hackathon Fridays are typically conducted as follows: In the morning, we receive the project brief, and then using the knowledge we have learned (mainly from the current week), work together as a team on the project. At the end of the day, we present our work to coaches and peer bootcampers.

Our Team’s CountryInfo API Project

After receiving the project brief on Friday morning, we agreed to spend ten minutes reading through the brief individually. Then, we came back together to discuss our understanding of the project, and how we wanted to plan the project and use our time.

Planning

As we all came from different countries, we decided to choose to create a database with information of different countries. We used draw.io to create this flowchart, which helped us to virtualize tasks step by step and which file we should create and work on in each step.

Data

Our data is stored in a JSON file. Thanks to my teammates and their master skills in using ChatGPT, we quickly filled our database with all the information we wanted for Spain, China, India, the UK, Switzerland and Japan. The following piece of code shows the JSON data structure we stored for each country.

[
  {
    "country": "United Kingdom",
    "capitalCity": "London",
    "id": "c68240be-36f9-4ba7-80da-2a94462df95d",
    "placesOfInterest": {
      "Edinburgh_Castle": "It is a historic fortress that dominates the skyline of Edinburgh",
      "Stonehenge": "One of the most famous prehistoric monuments in the world, located in Wiltshire",
      "Giant_Causeway": "A natural wonder and UNESCO World Heritage Site located in Northern Ireland"
    }
  }
  ...
]

Demo

Here we use the VSCode extension Thunder Client to test our API endpoints. A list of all the endpoints we created are listed as follows:

Teamwork Challenges in Coding Bootcamp

Each week we switch team members on Monday. We started by saying goodbye to last week’s team members, we were then assigned to a new group (two or three people).

“Monday is the hardest.” Exactly, I remembered hearing this from one peer bootcamper on a discussion session. And it resonated strongly with me. The anxiety of establishing a rapport with new people. The unknowns of new topics/knowledge of the coming week. The uncertainty about whether we, as a team, can effectively learn new knowledge together and face challenges.

“…I’m not sure about that, could we try something different?” Dealing with different ideas sometimes can be hard. Especially when the team was given a limited amount of time and worked on challenging tasks.

What I learned from this week’s collaborative working

Give everyone time to get to know each other and understand how other people learn and work. Each of us has different studying and working habits. Some people like to express their thoughts while they’re thinking, while others prefer to think first and then speak.

I think through these weeks’ of studying and working with different people, my biggest takeaway is — — it doesn’t matter how different we are (in terms of preferred ways of learning and working), as long as we communicate well, stay positive, and working towards the same goal, we can always achieve results that exceed our expectations.