How to transform input data inside custom component?

Question

For example, I have component:

@Component({
  selector: 'my-selector',
  inputs: ['data'],
  moduleId: module.id,
  template: '<p>{{transformedData}}</p>'
})
export class MyComponent {
  public transformedData: string;
  @Input() public data: string;

  // How to call this event on "data" change?
  public someEvent() {
    this.transformedData = this.data + '!';
  }
}

How to call someEvent() on data changes?

@micronyks It is for relative Urls, more info: schwarty.com/2015/12/22/… — Nick
– Nick, Commented Mar 27, 2016 at 14:56
i'm using commonJs, my HTML/ts files are in app folder but compiled files i.r js files in another dist folder from where my app ran, now when i use moduleId: module.id it took path from 'dist/blabla...' but there angular2 found only .js files not HTML now how to tell angular to take path from src folder instead of dist folder ? — Pardeep Jain
– Pardeep Jain, Commented Mar 28, 2016 at 7:29
@Pardeep Jain, You can copy HTML files into dist/blabla too — Nick
– Nick, Commented Mar 28, 2016 at 11:29

Ankit Singh · Accepted Answer · 2016-03-27 15:20:00Z

3

onchanges will get fired when data is changed.So, within onChanges you can call someEvent function.

export class MyComponent {
  public transformedData: string;
  @Input() public data: string;

  ___________________________________________________________________________________________
  // EDIT: you can also do it. Not necessary but can be done this way too.
 //  Note: If you go with this approach, you don't need to use onchanges hook and don't require above @Input public data line.
    @Input() set data(data:string)
           console.log(data);
           this.someEvent();
   }
 ____________________________________________________________________________________________ 


  ngOnChanges(...args: any[]) {

        console.log(args);
        this.someEvent();
  }

  // How to call this event on "data" change?
  public someEvent() {
    this.transformedData = this.data + '!';
  }
}

edited Mar 27, 2016 at 15:20

Ankit Singh

25k12 gold badges68 silver badges90 bronze badges

answered Mar 27, 2016 at 14:48

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

How to transform input data inside custom component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related