title: Mapping String to Object in Angular
body: <p>I want to map a string to object (possibly same as JAVA does) in Angular.</p>
  
  <p>json String: <code>{"policyNumber":"1234", "firstName":"archi"}</code></p>
  
  <p>Typescript Object :</p>
  
  <pre><code>export class ComplainDto {
    policyNumber: string;
    firstName: string;
    lastName: string;
    businessUnit: string     
  }
  </code></pre>
  
  <p>In my TS i did following</p>
  
  <pre><code>export class LodgeComplainComponent {
  
    complainDto: ComplainDto;
  
  
    constructor(private activatedRoute: ActivatedRoute) {
      this.complainDto = new ComplainDto();
  
    }
  
    ngOnInit() {
      this.activatedRoute.queryParams.subscribe(params =&gt; {
        console.log("params - "+params["complainData"]);
        if (params["complainData"] != '' &amp;&amp; params['complainData'] != 'undefined') {
          this.complainDto = JSON.parse(params["complainData"]);
        }
        for (var key in this.complainDto) {
              console.log(key);
        }
      });
    }
  
  
  }
  </code></pre>
  
  <p>complainDTO object has only two attribute (policyNumber and FirstName)
  I want (policyNumber, firstName, lastName , businessUnit) to be attributes of complainDTO . as I have not passed last name and business Unit as part values of both should be null or empty</p>
  
  <p>how can I do so that fields do not show for last name and business unit 'undefined'</p>
  
  <pre><code>  &lt;div&gt;
      &lt;mat-form-field&gt;
        &lt;div&gt;
        &lt;mat-label&gt;Policy Number&lt;/mat-label&gt;
        &lt;input matInput  [value]="complainDto.policyNumber"/&gt;
        &lt;/div&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;mat-form-field&gt;
        &lt;mat-label&gt;First Name&lt;/mat-label&gt;
        &lt;input matInput [value]="complainDto.firstName"/&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;mat-form-field&gt;
        &lt;mat-label&gt;Last Name&lt;/mat-label&gt;
        &lt;input matInput  [value]="complainDto.lastName"/&gt;
      &lt;/mat-form-field&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
       &lt;mat-form-field&gt;
         &lt;mat-label&gt;Business Unit&lt;/mat-label&gt;
         &lt;input matInput  [value]="complainDto.businessUnit"/&gt;
       &lt;/mat-form-field&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Console log shows 
  <a href="https://i.stack.imgur.com/LkLr8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LkLr8.png" alt="enter image description here"></a></p>
  
  <p>No other object attributes are created like lastName, businessUnit</p>