CODEWITHSUNDEEP
angular
efultz
efultz

Reputation: 1265

Angular update textarea field from component

I have a textarea and I am trying to push an update to that field. I can't seem to figure out how to do this. I am successfully getting my combobox to pass the selected item into dropdownSourceSelected. From there I want to: 1) update the textarea field 2) clear the combobox value (return it to undefined so the placeholder returns

I cannot figure out how to do this. I have seen references to using $scope but when I tried this I got an error about $scope being unknown.

table-widget.component.html
      <textarea vertical-align:top ng-model="filterSelection" readonly name="selectedfilters" cols = "50" rows = "1"></textarea>

table.component.ts
  public dropdownSourceSelected(selection: string): void  {
    if (this.filterSelection != '')
      this.filterSelection += '&';
    this.filterSelection += "source=";
    this.filterSelection += selection;
    console.log('filter selection: ', this.filterSelection);
  }

Upvotes: 0

Views: 2644

Answers (1)

DeborahK
DeborahK

Reputation: 60528

This code:

ng-model="filterSelection"

Needs to be this:

[(ngModel)]="filterSelection"

And FYI $scope is AngularJS (v1). AngularJS and Angular have very different syntax so any posts you find with solutions in AngularJS won't work in Angular.

To set a property in a nested component, use an @Input property in the component and set that property using property binding in the HTML. So something like this:

import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'pm-star',
    templateUrl: './star.component.html',
    styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {
    @Input() rating: number;
    starWidth: number;
    @Output() ratingClicked: EventEmitter<string> =
            new EventEmitter<string>();

    ngOnChanges(): void {
        this.starWidth = this.rating * 86 / 5;
    }

    onClick(): void {
        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
    }
}

You then set the rating property like this:

                        <pm-star [rating]='product.starRating'
                            (ratingClicked)='onRatingClicked($event)'>
                        </pm-star>

Upvotes: 1

Related Questions