title: Angular mat select value default value from api
body: <p>How do we set the default value to a select menu in the latest angular? I have <code>getAccountRoleDropdown</code> that gets the list of roles and populates it to a select menu, I also have <code>getUserGeneralDetails</code> that get the details of users.</p>
  <p>I want to check if the <code>userRoleDto</code> from <code>getUserGeneralDetails</code> has value then show it as default value (value is the id), show <code>roleName</code> on <code>mat-select</code> and show <code>accountRoles</code> as options and if a user wanted select item from mat select options set value as id and show roleName.</p>
  <p>Any idea on how is this possible guys? do I still need <code>selectChangeHandler</code>? Thanks.</p>
  <p>#html code for the select</p>
  <pre class="lang-html prettyprint-override"><code>   &lt;mat-select (selectionChange)=&quot;selectChangeHandler($event)&quot;&gt;
        &lt;mat-option *ngFor=&quot;let role of accountRoles&quot; &gt;
           {{role.roleName}}
        &lt;/mat-option&gt;
     &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>#user data from getUsergeneraldetails</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;id&quot;: 1,
      &quot;invitedByDate&quot;: &quot;08/10/2021 02:06 am&quot;,
      &quot;identityId&quot;: null,
      &quot;title&quot;: &quot;COO&quot;,
      &quot;isSso&quot;: null,
      &quot;ssocredentials&quot;: &quot;&quot;,
      &quot;userAccountDto&quot;: [
          {
              &quot;id&quot;: 1,
              &quot;accountId&quot;: 4,
              &quot;userRoleDto&quot;: {
                  &quot;id&quot;: 6,
                  &quot;roleName&quot;: &quot;Transaction Super User&quot;
              },
      ],
      &quot;accountId&quot;: 0,
      &quot;roleId&quot;: 6,
      &quot;isVerified&quot;: null,
      &quot;securityRole&quot;: &quot;Transaction Super User&quot;,
      &quot;ssoEnabled&quot;: &quot;No&quot;,
     
  }
  </code></pre>
  <p>#get user data</p>
  <pre class="lang-js prettyprint-override"><code>getUserGeneralDetails() {
      this.isInProgress = true;
      this._userProfileService
        .getUserGeneralDetails(this.userId, this.accountId)
        .pipe(finalize(() =&gt; (this.isInProgress = false)))
        .subscribe({
          next: (res) =&gt; {
            if (res.isSuccess) {
              this.data = res.data;
              console.log(&quot;user data&quot; , this.data)
            }
          },
          error: (err) =&gt; this._notificationService.showError(err),
          complete: noop,
        });
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/tRh86.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tRh86.png" alt="enter image description here" /></a></p>
  <p>#accountRoles Object from getAccountRoleDropdown</p>
  <pre><code>[
      {
          &quot;id&quot;: 1,
          &quot;roleName&quot;: &quot;Admin&quot;
      },
      {
          &quot;id&quot;: 2,
          &quot;roleName&quot;: &quot;Broker&quot;
      },
      {
          &quot;id&quot;: 5,
          &quot;roleName&quot;: &quot;Transaction Manager&quot;
      },
      {
          &quot;id&quot;: 6,
          &quot;roleName&quot;: &quot;Transaction Super User&quot;
      },
      {
          &quot;id&quot;: 7,
          &quot;roleName&quot;: &quot;Unlicensed User&quot;
      }
  ]
  </code></pre>
  <p>#get list of roles</p>
  <pre><code>getAccountRoleDropdown() {
      this.AccountRoleIsInProgress = true;
       this._accountService.getAccountRoleDropdown(this.accountId, &quot;&quot;)
        .pipe(
          finalize(() =&gt; this.AccountRoleIsInProgress = false),
        ).subscribe({
          next: (res) =&gt; {
            if (res.isSuccess) {
              this.accountRoles = res.data;
              console.log(&quot;this.accountRoles&quot; ,this.accountRoles)
              // this.populateAccountRoleDropdown(res.data);
            }
          },
          error: err =&gt; this._notificationService.showError(err),
          complete: noop
        });
    }
  </code></pre>