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

Question

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.

im not an angular expert, but cant you simply include html into the string? this.text = "Search for <h1>${this.keyword}</h1> with"; — Jonas Wilms
– Jonas Wilms, Commented Apr 16, 2017 at 10:44
@Jonasw thank you, it's very cool and simple idea. thx. Anyway, i have a lot ways to solute this. First idea was with es5 string template, and i interested in solve this problem. But thank you) — Максим Тарсис
– Максим Тарсис, Commented Apr 16, 2017 at 12:15

Oen44 · Accepted Answer · 2017-04-16 10:48:23Z

3

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>

answered Apr 16, 2017 at 10:48

Oen44

3,2461 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Максим Тарсис Over a year ago

Thank, anyway, it's simple solution and it's pretty good. But i don't understand for what @Input() this ;))) But okay.

Oen44 Over a year ago

You can read about directives here and if my answer is what you were looking for, then check it as answer.

Максим Тарсис Over a year ago

but your code works without @Input() :))) All happens in one component ;) And tip for you - you should to use name=".." when using [(ngModel)]=".."

Oen44 Over a year ago

That's not necessary to specify name attribute. But if you want to use that in form and send data through it, then yes, name is needed.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related