Angular ngIf check if variable starts with a specified character in component html

Question

I currently have this:

<div *ngIf="name !== '@name1'>
  Show something
</div>

But I would like to change it to check if var name value starts with a specific character for example @.

How can I do this?

Does this answer your question? [Use ngIf checking if a string starts with certain character](https://stackoverflow.com/questions/51429248/use-ngif-checking-if-a-string-starts-with-certain-character) — Joseph Chotard, Aug 17 '20 at 09:53

Alexis · Accepted Answer · 2020-08-17T10:01:34.830

3

Use startsWith method like this

<div *ngIf="name.startsWith('@')">
  Show something
</div>

And if you want to check if string doesn't start with '@' simply add '!' like *ngIf="!name.startsWith('@')"

edited Aug 17 '20 at 10:01

answered Aug 17 '20 at 09:57

Alexis

1,685
1
12
30

1

Oh, this is also nice solution. – Felix Lemke Aug 17 '20 at 09:58
How would I say ... NOT start with? !== ? – user13962846 Aug 17 '20 at 10:00
1

Place an exclamation mark before a boolean statement to invert it `!name.startsWith('@')` – Felix Lemke Aug 17 '20 at 10:01
With the exclamation, I have edited – Alexis Aug 17 '20 at 10:02

score 1 · Answer 2 · answered Aug 17 '20 at 10:08

You can simply use indexOf method to get starting index of your character and if it's 0 it means it's true else false.

Like below.

<div *ngIf="name.indexOf('@name1') === 0">
   it's start with @name1
</div>

<div *ngIf="name.indexOf('@name1') !== 0">
  it's not start with @name1
</div>

score 1 · Answer 3 · answered Aug 17 '20 at 12:06

you can just add this code inside the Component :

export class NameComponent implements OnInit {

public isNameContainAt = false;
public name = 'name';
constructor() { }

ngOnInit() {
if (this.name.startsWith('@') == true) {
  this.isNameContainAt = true;
}

}

}

And then in the template :

<div *ngIf="!isNameContainAt">

Show something

Angular ngIf check if variable starts with a specified character in component html

3 Answers3