title: HackerRank Angular Basic Test Weather App
body: <p>I am taking the <a href="https://www.hackerrank.com/skills-verification/angular_basic" rel="nofollow noreferrer">HackerRank Angular Basic Skills Test</a> and trying to make a <a href="https://hrcdn.net/s3_pub/istreet-assets/aiYyB8bIMufQ00lpPduPbQ/weather-component.gif" rel="nofollow noreferrer">weather app</a></p>
  <p>I have a <code>weatherDetails.component</code> with the following code</p>
  <pre><code>import { Component, Input, OnInit } from &quot;@angular/core&quot;;
  
      @Component({
        selector: &quot;weather-details&quot;,
        templateUrl: &quot;./weatherDetails.component.html&quot;,
        styleUrls: [&quot;./weatherDetails.component.scss&quot;],
      })
      export class WeatherDetails implements OnInit {
        @Input() weatherData: data[];
      
        city: string = &quot;&quot;;
      
        ngOnInit() {}
      }
      
      interface data {
        name: string;
        temperature: string;
        wind: string;
        humidity: string;
      }
  </code></pre>
  <p>The child component inherits <code>weatherData</code> from its parent</p>
  <pre><code>weatherData = [
      {
        name: &quot;San Jose&quot;,
        temperature: &quot;36º F&quot;,
        wind: &quot;31Kmph&quot;,
        humidity: &quot;66%&quot;,
      },
      {
        name: &quot;Seattle&quot;,
        temperature: &quot;30º F&quot;,
        wind: &quot;4Kmph&quot;,
        humidity: &quot;9%&quot;,
      },
      {
        name: &quot;New York&quot;,
        temperature: &quot;20º F&quot;,
        wind: &quot;8Kmph&quot;,
        humidity: &quot;61%&quot;,
      },
      {
        name: &quot;Chicago&quot;,
        temperature: &quot;27º F&quot;,
        wind: &quot;35Kmph&quot;,
        humidity: &quot;2%&quot;,
      },
      {
        name: &quot;Atlanta&quot;,
        temperature: &quot;22º F&quot;,
        wind: &quot;25Kmph&quot;,
        humidity: &quot;5%&quot;,
      },
      {
        name: &quot;Austin&quot;,
        temperature: &quot;25º F&quot;,
        wind: &quot;1Kmph&quot;,
        humidity: &quot;5%&quot;,
      },
      {
        name: &quot;Denver&quot;,
        temperature: &quot;30º F&quot;,
        wind: &quot;8Kmph&quot;,
        humidity: &quot;48%&quot;,
      },
    ];
  </code></pre>
  <p>I am rendering the child component via <code>weatherDetails.component.html</code> with classes removed for better readability</p>
  <pre><code>&lt;div&gt;
  
    &lt;section&gt;
      &lt;label&gt;Enter City: &lt;/label&gt;
      &lt;input [(ngModel)]=&quot;city&quot; type=&quot;text&quot; placeholder=&quot;Seattle&quot; data-test-id=&quot;app-input&quot;/&gt;
    &lt;/section&gt;
  
    &lt;section *ngFor=&quot;let weather of weatherData&quot;&gt;
      &lt;div *ngIf=&quot;city.toUpperCase() === weather.name.toUpperCase()&quot;&gt;
          &lt;div *ngIf=&quot;city&quot; data-test-id=&quot;weather-details&quot;&gt;
              &lt;div&gt;
                &lt;button&gt;
                  &lt;i&gt;wb_sunny&lt;/i&gt;
                &lt;/button&gt;
                &lt;span data-test-id=&quot;output-temperature&quot;&gt;{{weather.temperature}}&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;div data-test-id=&quot;output-wind&quot;&gt;
                  Wind: {{weather.wind}}
                &lt;/div&gt;
                &lt;div data-test-id=&quot;output-humidity&quot;&gt;
                  Humidity: {{weather.humidity}}
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf=&quot;city.toUpperCase() !== weather.name.toUpperCase()&quot; data-test-id=&quot;no-results&quot;&gt;No Results Found&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My approach was to use two-way binding via <code>[(ngModel)]=&quot;city&quot;</code> in <code>input</code> and store the <code>city</code> variable in my component.</p>
  <p>As I  loop through the array of objects in <code>weatherData</code> via</p>
  <pre><code>*ngFor=&quot;let weather of weatherData&quot;
  </code></pre>
  <p>every time the <code>input</code> value is changed, I would use</p>
  <pre><code>*ngIf=&quot;city.toUpperCase() === weather.name.toUpperCase()&quot; 
  </code></pre>
  <p>to check if the <code>input</code> value matches the <code>weather of weatherData</code> object and render the <code>div</code> if it does.</p>
  <p>My problem is that the <code>div</code> that outputs &quot;No Results Found&quot; when the <code>input</code> value does not match any object in <code>weather of weatherData</code> is a child of the <code>div</code> that renders the app. So I can't render &quot;No Results Found&quot; because its</p>
  <pre><code>*ngIf=&quot;city.toUpperCase() !== weather.name.toUpperCase()&quot;
  </code></pre>
  <p>logic clashes with its parent.</p>
  <p>How do I rewrite my code so that I can render &quot;No Results Found&quot; when the <code>input</code> value does not match any object in <code>weather of weatherData</code>?</p>
  <p>My weather app with input of 'S' (should render &quot;No Results Found&quot; but is blank) <a href="https://i.stack.imgur.com/kGaDn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kGaDn.png" alt="weather app" /></a></p>
  <p>My weather app with input of 'Seattle&quot; <a href="https://i.stack.imgur.com/6QgOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6QgOc.png" alt="weather app" /></a></p>