CODEWITHSUNDEEP
javascriptangularangular2-template
Максим Тарсис
Максим Тарсис

Reputation: 15

How to assign a bold(style) for a variable using ES6 string template in Angular?

I need to assign for my variable in ES6 string template a style[bold].

My code looks:

Component

export class AppComponent {
  public keyword = '';
  public text = '';
  onKey(value) {
    this.keyword = value;
    this.text = `Search for ${this.keyword} with`;
  };
}

Template

<input #box class="search-for" type="text" (keyup)="onKey(box.value)">

  <p *ngIf="keyword " class="search-line ">{{ text }}</p>

For example, if user types “Angular” then the text will be “Search for Angular with:”

Thank you.

Upvotes: 0

Views: 1610

Answers (1)

Oen44
Oen44

Reputation: 3206

ngModel and Input, that's what you need. Try this code:

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

export class AppComponent {
  @Input() keyword: string;
}

<input class="search-for" type="text" [(ngModel)]="keyword">

<p *ngIf="keyword" class="search-line ">Search for <b>{{keyword}}</b> with:</p>

Upvotes: 3

Related Questions