So, where we last left off we had a basic app done, but it wasn't terribly exciting, all it could do was copy whatever text we typed. Lets now go and add some more functionality.
Building the Rest of the App
Transforming the Text
We've got a box to type into, and we can see the text copied into the output field as we type it, so far so good. Now lets get to the meat of the problem, transforming that output text. To do this, we'll use a pipe. Pipes let you transform data that is displayed, for example changing how a date is formatted.
We're not going to do anything near as useful as that, however, all we want is to alternate the capitalisation of the text a user types in. To get started, lets make our pipe class.
The code snippet shows what's necessary for making a pipe, namely the @Pipe annotation, and the use of the PipeTransform interface. The transform function is where we'll make the magic happen. When the pipe is inv0ked, we'll manipulate the variable value and return a modified string. To use the pipe, we need to reference it in the core app file, and invoke it on the data we want to be transformed in the HTML file.
Using the pipe is quite straightforward, we just pipe (I see what you did there, Angular developers) our bound data into the pipe, using the name declared in the pipe annotation.
The HTML is still nicely readable using this pipe, and it's a good argument for naming pipes appropriately so you know what they do when referencing them.
Let's now go back to our sarcasm.pipe.ts file, and add some logic. This step is more of a basic algorithm problem than it really is an Angular issue. We have a string, and we want to make sure that every alternate character in that string is upper case, and all other characters are lower case. There's a few ways of going about doing this, and it's a fun exercise to try to find the most compact way the problem can be solved.
After a bit of back and forth, I arrived at the algorithm shown in the following file. Is it the greatest, most compact way to do what we want? Possibly not, but it's pretty darn good all the same.
The code makes two versions of the input, one lowercase, one uppercase, and then builds a new string, alternating pulling a character from the lower or upper-case string.
Once this is implemented, we should see that whatever text we type into the input box gets output with alternating capitalisation, nice! So we're done, right?
Prettifying the Whole Thing
Of course we're not done! While our app now does what we set out to do, it could look a bit, well, nicer. Might as well use this opportunity to get our hands dirty with Material, design components for Angular which lets you make things lot a bit more professional.
We'll add Material to our app by running the following command, which will add all the dependencies and magical "this is a great framework but I have no clue how it really works" stuff.
ng add @angular/material
There'll be a few questions asked in the CLI, and we can go with the default answers to them all.
So how do we use this fancy new Material stuff? By importing what we need into the app.module.ts file (remember this is the core app file), and using different tags in our HTML file. There was a bit of trial and error to get this all fully functional, and it required importing the specific components we want to use.
Let's now completely re-do the beautiful HTML we've written to make use of the shiny Material components. While we're at it, lets add some placeholder text, and some labels to the forms, make the UI a bit more self-explanatory.
Looking good! One thing to note is that Material lets us choose from a wide range of pre-defined CSS styles, so there's lots of options to simply change the highlighting colours used.
Copy to Clipboard
Are we done? Almost! Lets push the boat out a bit and add a "Copy to Clipboard" button, because once our text is transformed, we'll want an easy way to send it to others in chat messages. This is where we'll see another advantage of using material, because the button is going to look nice and shiny without us having to do much. In fact, there's a wide range of pre-defined button styles to choose from, if you don't want to have to think about stylings at all. To use Material buttons, and clipboard functionality, we'll add two more imports to the core app file.
To add the button to the HTML, we'll simply add this snippet inside the form tags.