Using $watch in Angular/Typescript

Question

I have a select box where I need to watch for changes so I can dynamically change the value of my second select box.

<select ng-model="$ctrl.primaryValue"
        ng-options="key as value for (key, value) in $ctrl.primaryOptions">
</select>
<br /><br />
<select ng-model="$ctrl.secondaryValue"
        ng-options="key as value for (key, value) in $ctrl.secondaryOptions">
</select>

How would I best watch $ctrl.primaryValue and according to that load in other $ctrl.secondaryOptions.

@Joe Clay I didn't make this project from the start so I'm still not sure about some things of it but I thought I was using Angular 2.0. Is that certainly not true since I can use $watch? If not can you maybe share a link to what is used in Angular 2.0 for this purpose? — turoni
– turoni, Commented May 31, 2016 at 9:20
If you're using $watch, you're definitely using Angular 1 - that service doesn't exist at all in Angular 2! See the answers to stackoverflow.com/questions/34569094/… for more information on what $watch has been replaced with. Sorry for the drive-by edit, should have left you some more info! — Joe Clay
– Joe Clay, Commented May 31, 2016 at 9:26
@turoni i think you don't need $watch as ng-options/ng-repeat always triggers the digest cycle whenever a click event occurs inside your application. — Ajay
– Ajay, Commented May 31, 2016 at 9:32
@Ajay I think I get what you mean (the select tag already provides data-binding?). But how can I otherwise attach a function that will update when primaryValue changes? — turoni
– turoni, Commented May 31, 2016 at 9:36
@turoni use ng-change attribute of <select></select> for updating secondarySelect value instead of using $watch, see my answer for more info... — Ajay
– Ajay, Commented May 31, 2016 at 10:04

turoni · Accepted Answer · 2016-05-31 11:37:22Z

4

In my solution I first injected the $scope in my controller.

private dropdownService: DropdownService;
private $scope: any;

public static $inject: string[] = [DropdownService.IID, '$scope'];

constructor(dropdownService: DropdownService, $scope: any) {
    this.dropdownService = dropdownService;
    this.$scope = $scope;

And then still inside this constructor attached a $watch to this scope

this.$scope.$watch(
    (): string => {
        return this.primaryValue;
    },
    (newValue: string, oldValue: string):void => {
        console.log("the value ", oldValue, " got replaced with ", newValue);
    }
);

The first functions returns a value that angular will compare to and if it changes execute the second function.

Hope this'll help someone out.

edited May 31, 2016 at 11:37

answered May 31, 2016 at 8:48

turoni

1,4352 gold badges19 silver badges38 bronze badges

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

Comments

turoni · Accepted Answer · 2016-05-31 11:53:50Z

2

Use ng-change attribute of select tag and call the respective function which will further update the value shown inside secondary select.

<select ng-model="$ctrl.primaryValue"
        ng-options="key as value for (key, value) in $ctrl.primaryOptions" ng-change="$ctrl.updateSecondaryOptions()">
</select>

Inside controller

public updateSecondaryOptions(): void {
    // update the secondary options value here
}

As click event triggers digest cycle, the change will automatically get reflected inside secondary select tag.

Regards

Ajay

edited May 31, 2016 at 11:53

turoni

1,4352 gold badges19 silver badges38 bronze badges

answered May 31, 2016 at 10:02

Ajay

5,0013 gold badges28 silver badges39 bronze badges

1 Comment

turoni Over a year ago

Thank you that's indeed a better solution for this case.

Community · Accepted Answer · 2017-05-23 12:34:40Z

2

See also this question: Angularjs: 'controller as syntax' and $watch.

$scope.$watch("$ctrl.primaryValue", (value) => {
    console.log(value)
});

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 31, 2016 at 9:08

Niels Steenbeek

4,8542 gold badges44 silver badges51 bronze badges

1 Comment

turoni Over a year ago

Thanks I was forgetting the "" marks thus the use of the function. Also all in all this wasn't that different from normal Angularjs implementation but since the translation to typescript can sometimes be difficult to make I decided to share this.

Collectives™ on Stack Overflow

Using $watch in Angular/Typescript

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related