i18n.md

Current approach with ngx-translate

Template:

<p>
  <span class="departure">{{ 'extras.available.LCO.departure' | translate: {time: departureTime} }}</span><br>
  {{ 'extras.available.LCO.proposal' | translate: {time: optionTime} }}<br>
</p>

<p>{{ 'extras.available.LCO.notification' | translate }}</p>

Approach for independent components

Template:

<p>
  <span class="departure">{{ intl.departureText(departureTime) }}</span><br>
  {{ intl.proposalText(optionTime) }}<br>
</p>

<p>{{ intl.notification }}</p>

Component:

@Component({
  selector: 'late-checkout-info',
  templateUrl: './late-checkout-info.component.html',
  styleUrls: ['./late-checkout-info.component.scss'],
})
export class LateCheckoutInfoComponent {

  @Input() departureTime: string;
  @Input() optionTime: string;

  constructor(public intl: LateCheckoutIntl) { }
}

Class providing localised labels:

@Injectable({ providedIn: 'root' })
export class LateCheckoutIntl {

  departureText(time: string): string {
    return `Your flight departs at ${time}`;
  }

  proposalText(time: string): string {
    return `Why not relax with a ${time} late checkout?`;
  }

  notification = 'Please note that you may be moved to a different room.';
}

How to override localisable texts:

providers: [
  { provide: LateCheckoutIntl, useClass: LateCheckoutIntlNecnlNl },
],