O'Reilly logo

TypeScript Blueprints by Ivo Gabe de Wolff

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The main component

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.

Using our other components

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.

Two-way bindings

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required