title: How to get Angular getter and setter working?
body: <p>trying to apply 'Intercept input property changes with a setter' from the angular.io guide. the template of the child shows, but no changes are being made to the input of the parent..?? it worked before :-) :-(</p>
  <p>This is the child component: ts and html:</p>
  <p>ts file</p>
  <pre><code>```import { Component, OnInit, Input } from '@angular/core';
  import { BowlingGame } from '../model/bowling-game.model';
  
  @Component({
    selector: 'app-generate-result',
    templateUrl: './generate-result.component.html',
    styleUrls: ['./generate-result.component.css']
  })
  
  export class GenerateResultComponent {
    @Input()
    get game(): BowlingGame { return this._game; }
    set game(game: BowlingGame) {
    this._game.rolls[0] = game.rolls[0] + 15;
    this._game = game;
    }
    private _game = { rolls: &lt;number[]&gt;[], player: &quot;&quot;, isActive: true };
  }```
  </code></pre>
  <p>the html: <code>&lt;h2&gt;generate-result.component.html {{game | json}}&lt;/h2&gt;</code></p>
  <p>And the parent component, the html file:
  I include everything, because I don't know if it is a bad practice that this parent has many children.. ? The app-generate-result child is on the first line of the code..</p>
  <pre><code>```&lt;app-generate-result *ngIf=&quot;bowlingGamePlayer1&quot; [game]=&quot;bowlingGamePlayer1&quot;&gt;&lt;/app-generate-result&gt;
  
  &lt;h1&gt;Insert your Roll score (dashboard for 2 players)&lt;/h1&gt;
  &lt;div class=&quot;player1&quot; *ngIf=&quot;bowlingGamePlayer1.isActive&quot; &gt;
    &lt;h2&gt;Input Player 1:&lt;/h2&gt;
  &lt;app-create-roll-item (onRollCreated)=&quot;insertRollPlayer1($event)&quot;&gt;&lt;/app-create-roll-item&gt;
  &lt;/div&gt;
  
  &lt;div *ngIf=&quot;bowlingGamePlayer2.isActive&quot; class=&quot;player2&quot;&gt;
    &lt;h2&gt;Input Player 2: &lt;/h2&gt;
  &lt;app-create-roll-item (onRollCreated)=&quot;insertRollPlayer2($event)&quot;&gt;&lt;/app-create-roll-item&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;bowlingGame1 | json (from parent:app.comp): {{bowlingGamePlayer1 | json}}&lt;/h2&gt;
  
  &lt;!-- results are displayed in parent: app.component.html --&gt;
  &lt;table&gt;
  
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td colspan=&quot;3&quot;&gt;frame1&lt;/td&gt;
      &lt;td colspan=&quot;3&quot;&gt;frame2&lt;/td&gt;
      &lt;td colspan =&quot;3&quot;&gt;frame3&lt;/td&gt;
      &lt;td colspan =&quot;3&quot;&gt;frame4&lt;/td&gt;
      &lt;td colspan =&quot;3&quot;&gt;frame5&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr class=&quot;player1&quot;&gt;
      &lt;td&gt;Player:1&lt;/td&gt;
      &lt;td *ngFor=&quot;let score of bowlingGamePlayer1.rolls&quot;&gt;{{score}}&lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr class=&quot;player2&quot;&gt;
      &lt;td&gt;Player:2&lt;/td&gt;
      &lt;td *ngFor=&quot;let score of bowlingGamePlayer2.rolls&quot;&gt;{{score}}&lt;/td&gt;
    &lt;/tr&gt;
  
  
  &lt;/table&gt;
  
  
  &lt;h1&gt;rollsPlayer1&lt;/h1&gt;
  &lt;h2&gt;{{rollsPlayer1 | json}}&lt;/h2&gt;
  &lt;!--
  &lt;h1&gt;rollsPerFramePlayer1&lt;/h1&gt;
  &lt;h2&gt;{{rollsPerFramePlayer1 | json}}&lt;/h2&gt;
  --&gt;
  &lt;h3&gt;indexRollFrame&lt;/h3&gt;
  &lt;h3&gt;{{indexRollFrame}}&lt;/h3&gt;&lt;h3&gt;rollsPerFrame: {{rollsPerFrame | json }}&lt;/h3&gt;
  
  &lt;h1&gt;totalPins&lt;/h1&gt;
  &lt;h2&gt;{{totalPins}}&lt;/h2&gt;
  &lt;h1&gt;rolls player 2 length: {{rollsPlayer2.length}} /// max nr rolls {{maxNumberRollsPlayer2}}&lt;/h1&gt;
  &lt;h1&gt;rolls player 1 length: {{rollsPlayer1.length}} /// max nr rolls {{maxNumberRollsPlayer1}}&lt;/h1&gt;
  &lt;h1&gt;index frame player 1/ player2&lt;/h1&gt;
  &lt;h2&gt;{{indexFramePlayer1 }}/ {{indexFramePlayer2}}&lt;/h2&gt; --&gt;
  ```
  </code></pre>
  <p>the ts of the parent (for completeness reasons):</p>
  <pre><code>```import { Component, OnInit, Output } from '@angular/core';
  import { BowlingGame } from './model/bowling-game.model';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    bowlingGamePlayer1
    bowlingGamePlayer2
    rollsPlayer1
    rollsPlayer2
    rollsPerFrame
    // total pinns trown !!
    totalPins = 0;
    //  roll index in frame (range: 0 -1- 2)
    indexRollFrame = 0;
    // index frame: 0-4 (5 frames) , frame 5 is special: strike/spare in 5th frame
    indexFramePlayer1 = 0;
    indexFramePlayer2 = 0;
    rollZero = 0;
  
    maxNumberRollsPlayer1 = 15;
    maxNumberRollsPlayer2 = 15;
    // leave constructor empty of the real work
    constructor() {
      this.bowlingGamePlayer1 = new BowlingGame([], &quot;player1&quot;, true);
      this.bowlingGamePlayer2 = new BowlingGame([], &quot;player2&quot;, false);
      this.rollsPlayer1 = this.bowlingGamePlayer1.rolls;
      this.rollsPlayer2 = this.bowlingGamePlayer2.rolls;
      this.totalPins = 0;
      this.rollsPerFrame = &lt;number[]&gt;[];
     }
  
    ngOnInit(): void {
    }
  
    passToNextPlayer() {
      this.bowlingGamePlayer1.isActive = !this.bowlingGamePlayer1.isActive;
      this.bowlingGamePlayer2.isActive = !this.bowlingGamePlayer2.isActive;
      this.indexRollFrame = 0;
      this.totalPins = 0;
      this.rollsPerFrame = [];
    }
  
  // try to make a function per frame: check! // spare = 15 pins after 2 OR 3 rolls!
    insertRollPlayer1(r:number):void {
      // after execution: length == maxNumberRolls :-)
      if (this.rollsPlayer1.length &lt; (this.maxNumberRollsPlayer1)) {
        this.rollsPlayer1.push(r)
          // put the scores per frame in a rollsPerFrame variable
          this.rollsPerFrame[this.indexRollFrame] = r; // array [0,0,0], starts with indexRollFrame 0
  
          this.totalPins += this.rollsPerFrame[this.indexRollFrame]; // number, starts with 0
          //  // starting from frame 5 (index is 4 beforehand) apply other logic !!! frame 5 is longer than the other frames!
          if ((this.indexFramePlayer1 == 4) &amp;&amp; (this.totalPins &lt; 15) &amp;&amp; (this.indexRollFrame == 2)) {
            this.passToNextPlayer();
          } else if ((this.indexFramePlayer1 == 4) &amp;&amp; (this.totalPins &lt; 15) &amp;&amp; (this.indexRollFrame &lt; 2)) {
            this.indexRollFrame += 1;
          }
          // set max number of rolls, based on 5th frame. Frame 5 is not limited to three rolls!
          if(this.indexFramePlayer1 == 4 &amp;&amp; this.totalPins == 15) {
            if(this.indexRollFrame==0) {
              this.maxNumberRollsPlayer1 = 16;
              this.indexRollFrame += 1;
          // case spare in 2 rolls
            } else if (this.indexRollFrame == 1) {
              this.maxNumberRollsPlayer1 = 16;
              this.indexRollFrame += 1;
              // spare in 3 rolls // edge case! this could be the last roll!
            } else if (this.indexRollFrame == 2) {
              this.maxNumberRollsPlayer1 = 17;
              this.indexRollFrame += 1;
              }
            }
          // set the logic for the end of the game, in case of spare or strike in last frame
          if(this.indexFramePlayer1 == 4 &amp;&amp; this.totalPins &gt; 15) {
            if(this.rollsPlayer1.length == this.maxNumberRollsPlayer1) {
              this.passToNextPlayer();
            }
          }
          if (this.indexFramePlayer1 &lt; 4) {
            if (this.totalPins == 15) {
              // if strike
              if (this.indexRollFrame == 0) {
                // this.rollsPlayer1.push(this.rollZero);
                // this.rollsPlayer1.push(this.rollZero);
                this.indexFramePlayer1 += 1;
                this.passToNextPlayer();
                // case spare after 2 rolls
              } else if (this.indexRollFrame == 1) {
                // this.rollsPlayer1.push(this.rollZero);
                this.indexFramePlayer1 += 1;
                this.passToNextPlayer();
                // case 15 pins after 3 rolls
              } else {
                this.indexFramePlayer1 += 1;
                this.passToNextPlayer()
              }
              // case not 15 pins in total after 3 rolls
            } else if (this.indexRollFrame == 2) {
              this.indexFramePlayer1 += 1;
              this.passToNextPlayer()
              // case if frame is not over yet
            } else {
              this.indexRollFrame += 1;
            }
          }
      }
    }
  
  // two functions for player 1/ player2 because you don't get the info from the form which player is at turn
    insertRollPlayer2(r:number):void {
      if (this.rollsPlayer2.length &lt; (this.maxNumberRollsPlayer2)) {
        this.rollsPlayer2.push(r)
        this.rollsPerFrame[this.indexRollFrame] = r; // array [0,0,0], starts with indexRollFrame 0
        this.totalPins += this.rollsPerFrame[this.indexRollFrame]; // number, starts with 0
        // start with cases in frame 5
        if (this.indexFramePlayer2 == 4 &amp;&amp; this.totalPins &lt; 15 &amp;&amp; this.indexRollFrame == 2) {
          this.bowlingGamePlayer2.isActive = false;
        }
        if (this.indexFramePlayer2 == 4 &amp;&amp; this.totalPins &lt; 15 &amp;&amp; this.indexRollFrame &lt; 2) {
          this.indexRollFrame += 1;
        }
        // set max number of rolls, based on 5th frame. Frame 5 is not limited to three rolls!
        if (this.indexFramePlayer2 == 4 &amp;&amp; this.totalPins == 15) {
          if (this.indexRollFrame == 0) {
            this.maxNumberRollsPlayer2 = 16;
            this.indexRollFrame += 1;
            // case spare in 2 rolls
          } else if (this.indexRollFrame == 1) {
            this.maxNumberRollsPlayer2 = 16;
            this.indexRollFrame += 1;
            // spare in 3 rolls // edge case! this could be the last roll!
          } else if (this.indexRollFrame == 2) {
            this.maxNumberRollsPlayer2 = 17;
            this.indexRollFrame += 1;
          }
        }
        // set the logic for the end of the game, in case of spare or strike in last frame
        if (this.indexFramePlayer2 == 4 &amp;&amp; this.totalPins &gt; 15) {
          if (this.rollsPlayer2.length == this.maxNumberRollsPlayer2) {
            this.bowlingGamePlayer2.isActive = false;
          }
        }
        if (this.indexFramePlayer2 &lt; 4) {
          if (this.totalPins == 15) {
            // if strike
            if (this.indexRollFrame == 0) {
              // this.rollsPlayer2.push(this.rollZero);
              // this.rollsPlayer2.push(this.rollZero);
              this.indexFramePlayer2 += 1;
              this.passToNextPlayer();
              // case spare
            } else if (this.indexRollFrame == 1) {
              // this.rollsPlayer2.push(this.rollZero);
              this.indexFramePlayer2 += 1;
              this.passToNextPlayer();
              // case 15 pins after 3 rolls
            } else {
              this.indexFramePlayer2 += 1;
              this.passToNextPlayer()
            }
            // case not 15 pins in total
          } else if (this.indexRollFrame == 2) {
            this.indexFramePlayer2 += 1;
            this.passToNextPlayer()
          } else {
            this.indexRollFrame += 1;
          }
        }
      }
    }
  }
  ```
  </code></pre>