Write into html with Angular pipe-CodePudding

I have a pipe that returns an array of elements that have the hashtag

arr=''
spl!:string;
transform(value: any, ...args: any[]) {
   this.arr=''
   this.spl = value.split(' ')
   for (const iterator of this.spl) {
       if(iterator.charAt(0)==='#'){
        this.arr=value
        console.log(iterator);
       }

   }
    return this.arr;
}

in my ts file, I'm adding a text into the function

  this.noteService.getNoteById(this.queryParam).subscribe((res)=>{
  this.noteModel = res
  this.noteData = res.note
  this.textValue=Object(this.noteData).text
  this.textValue= this.format.transform(this.textValue) //this is the pipe
  this.textForm.controls['text'].setValue(this.textValue)// here I'm writing into textarea
})

The functions returns all tags, how can I add the tags in span tag and write text in textarea?

CodePudding user response：

For display text in textarea you can bind the textValue variable to the textarea like this (more info here):

<textarea [(ngModel)]="textValue"></textarea>

For display tags separately (more about pipes usage and iteration in templates):

<div >
  <span *ngFor="let tag of textValue | tags">{{ tag }}</span>
</div>

You can write a pipe this way:

@Pipe({
  name: 'tags'
}) class TagsPipe {

  transform(value: any, ...args: any[]) {
    return value?
      .split(' ')
      .filter(w => w.startsWith('#');
  }
}

In your component:

this.noteService.getNoteById(this.queryParam).subscribe((res) => {
  this.noteModel = res;
  this.noteData = res.note;
  this.textValue = (this.noteData as any).text;
});