Read data from inputs, provided by Pipes, Angular 2

Question

I have a text, in which there are inputs. These inputs were provided by Pipe (I needed to replace some words with these inputs). Now I want to write in each input different words, and store it to obj, so if I type in first 3 inputs smth like red, green, apple it stores to object { "0": "red", "1": "green", "2": "apple", }

Here is code

Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'replacer'})
export class SanitizeHtml implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(data, arg) {
    arg.forEach(item => data = data.replace(new RegExp(item, 'g'), '<input type="text" >'));
    return this.sanitizer.bypassSecurityTrustHtml(data);
  }
}

I Guess I need to hang something on this input in pipe, like

<input type="text" name="{{i}}" ngModel #prix="ngModel" [id]="i">

But it doesn't work now...

My component is

@Component({
  moduleId: module.id,
  selector: 'part2',
  template: `   
    <p>{{values}}</p>
    <p>{{abc}}</p>
    <div [innerHtml]="itemsSource | replacer: abc"></div>
    <button>Ok</button>
    <p>Score  <input/></p>
    <pre>{{f.value | json}}</pre>
  `,
  providers: [DataService]

})
// @Pipe({name: 'replacer'})
export class Part2Component implements OnInit {

  @ViewChildren ('prix') inputs;
  public itemsSource: string;
  public abc: string[];
  constructor(public dataService: DataService) {
  }

  ngOnInit() {
    this.abc = this.dataService.getData3();
    this.itemsSource = this.dataService.getData2();
  }
}

I use data from Dataservice

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

          @Injectable()
export class DataService {
              getData2() {
              let items3: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
              return items3;
            }
            getData3(){
              let items4: string[] = ['black', 'yellow'];
              return items4;
            }
          }

So, now I have Picture this example, and I want be able to type in words and display as object Picture 2 {"0": "APPLES", "1": "GREEN", "2": "BROWN",}

Please, help me...

score 1 · Answer 1 · answered Jun 16 '17 at 13:35

You can verify this post Equivalent of $compile in Angular 2 for use a Dynamic Component like $compiler of Angular 1 and insert a ngModel on input created by Pipe. Other way to solve this, is get the input values like code below:

import {Component, OnInit, ViewChildren} from "@angular/core";
import {SanitizeHtml} from "./PipeTeste";
@Component({
  selector: 'part2',
  template: `
    <p>{{values}}</p>
    <p>{{abc}}</p>
    <div [innerHtml]="itemsSource | replacer: abc"></div>
    <button (click)="buttonOk()">Ok</button>
    <p>Score  <input/></p>
    <pre>{{obj}}</pre>
  `,
  providers: [SanitizeHtml]

})
// @Pipe({name: 'replacer'})
export class Part2Component implements OnInit {

  @ViewChildren ('prix') inputs;
  public itemsSource: string;
  public abc: string[];
  public obj: string[];
  constructor(public p:SanitizeHtml) {
  }

  buttonOk() {
    let a:any = document.getElementsByClassName('inputValue');
    this.obj = [];
    for(let i in a){
      if(a[i] && a[i].value){
        this.obj.push(a[i].value)
      }
    }
  }

  ngOnInit() {
    this.abc =  ['black', 'yellow'];
    this.itemsSource = 'I like orange, blue, black, pink, rose, yellow, white, black';
  }
}

I hope I helped you.

Read data from inputs, provided by Pipes, Angular 2

1 Answers1