the focus of the input is simulated by adding a focus css class to the host element itself.but we added a similar border to the host element, creating the illusion that the component is a plain HTML input.the HTML input inside the component had its borders and outline removed.Try to guess what is the biggest problem of this design, while we break down this implementation step-by-step.Īs we can see on the template, the main idea is that the component is made of an icon and a plain HTML input.īefore going over the component class implementation, let's have a look at its styling: This is the initial implementation of our component: Component API Design - An Initial Attempt This is a pretty natural choice for implementing this component, and it's likely the design we could come up on a first attempt.īut there are several major problems with this design, let's have a look at how the component was implemented to understand why, and then see how Content Projection will provide a clean solution for those issues. So as we can see, the component is a custom HTML element named fa-input, that takes as input an icon name, and outputs the values of the text box. Let's first see how the component would be used: With this in mind, let's have a look at an initial attempt of implementing this design without content projection, and see what problems we run into. have good integration with Angular Forms.easily combinable with other Angular components and directives.Let's take this very common HTML pattern and make it available as an Angular component. So as you can see, we still had to use a couple of tricks to make this component look and behave as a plain HTML input! Design Goals we have then detected the focus and blur events in the input field, and we have used those events to add and remove a focus border to the wrapping DIV.we have hidden the borders of the plain HTML input, and we have added some similar looking borders to the wrapping DIV.Inside the component, there is a plain HTML input and a icon, wrapped in a DIV.So how does this work? The component is internally implemented using this very common HTML pattern: But this component does look like a native input, as it also has a blue focus border and supports Tab/ Shift-Tab. How Does This Component Work?Īs we know, normal HTML inputs cannot display an image. Notice that with the presence of both the icon and the text placeholder, we hardly need to have also the field label to the left, which is especially useful on mobile. For example, have a look at the following text boxes: The icon can be any of the icons available in the Font Awesome open source version, let's have a look at the component! Encapsulating a common HTML PatternĪdding an icon inside an input box is a very common HTML pattern that makes the input much easier to identify by the user. Our Font Awesome Input Box component is designed to look and feel just like a plain HTML Input, except that it has a small Icon inside the text box. This is the best way to make sure that we will not misuse the feature as well! So let's implement a small component without using content projection, and see what problems we run into. Let's start at the beginning: in order to understand content projection, we need to first understand what set of problems is the feature trying to solve.
What Problem is Content Projection Trying to Solve?
#Komplete 11 select contents how to#
How To apply styles to elements projected via ng-content.Designing the Same Component Using Content Projection.The Key Problem With The Initial Design.Component Design Problem 4 - Custom third party input properties.Component Design Problem 3 - Capturing plain browser events of elements inside a template.Component Design Problem 2 - Integration with Angular Forms.Component Design Problem 1 - Supporting all the HTML Properties of an HTML Input.An example of a component that would benefit from content projection.What Problem is Content Projection Trying to Solve?.In this post we will cover the following topics: The final component that we are about to build is available here in the Angular Package Format. We are going to see how content projection works, when to use it and why, and how it can improve a lot the design of some of our components. In order to learn content projection, let's use it build a small component (a Font Awesome Input Box). In this post, we are going to learn how to use this feature to design components that have a very simple but still powerful API - the post is as much about component design as it's about content projection! One of the Angular features that help us the most in building reusable components is Content Projection and ng-content.
0 kommentar(er)
