As you can see in the screenshot in the introduction of this chapter, this component should have a textbox, a button, and three tabs. Under the tabs, these component will show the forecast or the About page.
We can use our components that we have already written by adding them to the directives section and using their tag names in the template.
To get the value of the input box, we need two-way bindings. We can use the ngModel directive for that. The syntax combines the syntaxes of the two one-way bindings: [(ngModel)]="property". The directive is again a built-in one, so we don't have to import it.
Using this two-way binding, we can automatically update the weather widget after every key press. That would cause a lot of requests to the server, and especially on slow connections, that's not desired.
To prevent these issues, we will add two separate properties. The property location will contain the content of the input and activeLocation...