CODEWITHSUNDEEP
angular
Cem Kocagöz
Cem Kocagöz

Reputation: 634

How to make changes on value which came with @Input - Angular

im new at angular and typescript. I have a component and this component get some parameters. For example;

<app-measure-card 
                date={{item.date.substring(0,11)}} 
                type={{item.type}} 
                value={{item.value}}
                time={{item.date.substring(11)}}>
</app-measure-card>

measure-card.ts;

export class MeasureCardComponent implements OnInit {

    constructor() {    }

  ngOnInit() {

  }
  @Input() date: string;
  @Input() type: string;
  @Input() value: string;
  @Input() time: string;
}`

as you see, i get some values and printing them on my html file. But i want make some changes on date but i cant. Could you please help me?

Upvotes: 0

Views: 61

Answers (4)

Carlos R
Carlos R

Reputation: 11

 // use this imports  
 import { 
      Component, Input,
      OnInit,
      OnChanges, SimpleChanges, SimpleChange
    } from '@angular/core';


    export class MeasureCardComponent implements OnChanges, OnInit {
      @Input() name: string;

      constructor() {}

      ngOnChanges(changes: SimpleChanges) {
        const name: SimpleChange = changes.name;
        console.log('prev value: ', name.previousValue);
        console.log('got name: ', name.currentValue);
        this._name = name.currentValue.toUpperCase();
      }

      ngOnInit() {
        console.log(this.name);
      }
    }

Upvotes: 1

djangojazz
djangojazz

Reputation: 13232

You just need a two way binding. Simple example from Angular.IO:

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

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() { this.name = 'Nancy'; }
}

https://angular.io/api/forms/NgModel

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41387

create a get and set method to listen to changes

private _date: string;

@Input() 
get date(): string{
  return this_date;
}
set date(val: string) {
  this._date = val;
  // do your thing
}

Upvotes: 2

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

Use angular setters and getters

private _date: string
@Input() set date(val: string) {
    // modify val
    this._date = val
}

get date(): string {
    return this._date
}

Upvotes: 0

Related Questions