Ionic Angular Firebase - ZERO to ONE [Updated 2020] | Jai Preston | Skillshare

Ionic Angular Firebase - ZERO to ONE [Updated 2020]

Jai Preston, Software Engineer, Futurist, Founder

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
86 Lessons (7h 28m)
    • 1. Intro: What You'll Learn

    • 2. Getting Started

    • 3. Tools

    • 4. Authentication — 1) Login

    • 5. Authentication — 2) Google Login

    • 6. Authentication — 3) Login Errors

    • 7. Authentication — 4) Login CAPTCHA

    • 8. Authentication — 5) Showhide Password

    • 9. Authentication — 6) Signup

    • 10. Authentication — 7) Signup Validation

    • 11. Authentication — 8) Monitoring Authentication Status 1

    • 12. Authentication — 9) Role Based pt1

    • 13. Authentication — 10) Role Based pt2

    • 14. Guards — 1) AngularFire Guards

    • 15. Guards — 2) Classic Guards

    • 16. Structure — 1) Core Module

    • 17. Structure — 2) Global Header

    • 18. Data — 1) Firestore Data Manipulation

    • 19. Data — 2) Local Storage for Better UX

    • 20. Data — 3) Profile Picture

    • 21. Up-The-Ante — 1) Profile Picture 2

    • 22. Up-The-Ante — 2) Account Card 2

    • 23. Up-The-Ante — 3) Data Presentation

    • 24. Up-The-Ante — 4) Reset Password

    • 25. Up-The-Ante — 5) Tooltips Simple

    • 26. Up-The-Ante — 5) Tooltips Advanced

    • 27. Basics — Framework Architecture

    • 28. Data — CLI & Routing

    • 29. Data — Guards

    • 30. Data — Forms pt1

    • 31. Data — Forms pt2

    • 32. Data — Ionic: Grid, UI Components, Animations

    • 33. Data — NgModel

    • 34. Data — Lifecycles

    • 35. Data — Services

    • 36. Data — Models

    • 37. Data — Data Presentation

    • 38. RXJS — 1) Observables

    • 39. RXJS — 2) Transforming Data

    • 40. RXJS — 3) Filtering Data

    • 41. RXJS — 4) Timing & Plucking Data

    • 42. RXJS — 5) Awaiting & Buffering Data

    • 43. RXJS — 6) Unique Values

    • 44. RXJS — 7) Economical Code

    • 45. RXJS — 8) Side Effects, Debugging & Logging

    • 46. RXJS — 9) Combining Data Streams

    • 47. RXJS — 10) Errors & Retries

    • 48. The Todo App — 1) Getting Started

    • 49. The Todo App — 2) Dash Page for Todo List

    • 50. The Todo App — 3) Editing Todo Items

    • 51. The Todo App — 4) Todo Item History

    • 52. The Todo App — 5) Better Tree Structure

    • 53. The Todo App — 6) Improving Todo Form

    • 54. The Todo App — 7) Completing Todo Items

    • 55. The Todo App — 8) Adding Todo Items

    • 56. The Todo App — 9) Filtering & Sorting the List 1

    • 57. The Todo App — 10) Filtering & Sorting the List 2

    • 58. The Todo App — 11) Menu

    • 59. The Todo App — 12) Todo Service

    • 60. The Todo App — 13) Trash

    • 61. The Todo App — 14) Storage

    • 62. The Todo App — 15) Settings

    • 63. The Todo App — 16) Theme

    • 64. The Todo App — 17) Export Data

    • 65. The Todo App — 18) Import Data

    • 66. The Todo App — 19) Authentication pt1

    • 67. The Todo App — 20) Authentication pt2

    • 68. The Todo App — 21) Settings (Firebase)

    • 69. The Todo App — 22) Publishing PWA pt1

    • 70. The Todo App — 23) Finishing Touches: Database Service

    • 71. The Todo App — 24a) Reminders pt1

    • 72. The Todo App — 24b) Reminders pt2

    • 73. The Todo App — 24c) Reminders pt3

    • 74. The Todo App — 24d) Reminders pt4

    • 75. The Todo App — 25) Finishing Touches: Better Settings

    • 76. BONUS — Angular Directives

    • 77. BONUS — Font Awesome

    • 78. BONUS — Compression

    • 79. BONUS — Kubernetes

    • 80. BONUS — Custom Scripts

    • 81. BONUS — Local Libraries

    • 82. BONUS — Reminders with Cron

    • 83. BONUS — Node Server with Express

    • 84. BONUS — Shared Features

    • 85. BONUS — Multiple Versions of Node

    • 86. Outro: What You've Learned 1


About This Class


This course will be of great benefit regardless of your familiarity with Ionic, Angular, and/or Firebase. It's designed in such a way that linearity is not necessary: helpful if you are new, but if you know what you're looking for it's quick easy to find. This is fact how true learning happens: through non-linear, creative engagement with information.

The only thing prerequisite on your part is familiarity with Javascript and/or web development, and genuine curiosity. Everything else will fall into place.



The framework releases used in this course span across Ionic 4 and 5, and Angular 8 and 9. All code in the repo has since been updated to the latest releases and tested.  More information can be found at the GitHub repo.



All code from this course can be found at the GitHub monorepo (didaktio/Ionic-Angular-Course). The monorepo is broken down into submodules, which are independant repositories also locatable on the didaktio GitHub profile. Attached to every video (in Resources) is a link to the specific repo containing the code used in that video.


This is a future-proof course for practical people. Unlike many other such courses, little time is given to theory. Heavy theory about the concepts of Ionic, Angular, Javascript. Web Development, Firebase etc. are of little use early on - and rarely needed at all. What matters is their capabilities and potential as relevant to your needs. This course is about that. This course is making these powerful technologies do what you want. That isn't learned from documentation, but problem-directed doing.

In this course you will pick up 90% of the important principles underlying Ionic and Angular by focusing on specific and common problems like: login, user registration, role-based capabilities, blocking particular URLs, storing and manipulating data, notifications, sending emails, and more. Every line of code in this course was written on a live development server, so most videos finish with the result live in the browser.

The course is as anti-academic as you can get. We'll work through solutions together, often line-by-line, thinking in real-time. This means we'll encounter errors, figure out alternatives on-the-fly, and that things will be uncompromisingly changed when necessary.

The guiding philosophy is Just-in-Time Learning. Like every subject-area in the world, advancement in understanding is amplified 100-fold when the information being provided maps onto a local problem — in other words, we learn much faster when working with problems that we understand AND that are interesting. Absent well-defined problems, learning never really happens; theory only sticks when you're familiar with the subject area.

Again, this is a practical course. Only take it if you're serious about learning how to develop applications and build websites with Ionic and/or Angular.

Amongst the learnings on offer:

  • The fundamentals of the LATEST Ionic and Angular releases + TypeScript, Node, Google Cloud, RXJS, and more

  • User Login and Signup (multiple methods)

  • Popovers, Modals, Alerts

  • Notifications, automatic emails, text message logic (and all common background task needs)

  • How to deploy an app/website to the web using Kubernetes and/or Firebase Hosting

  • Storing data on device for user detection (like how most websites know it's you even when you're logged out)

  • How to stream, convert, transform and present live, complex data as good as Netflix (RXJS)

  • Angular Modules, Components, Pipes, Attributes, Directives (ngFor, ngIf, ng-container, ng-template etc)

  • Building a fine-grained theme controller

  • Ionic Pages, UI Components, CLI

  • Role-Specific capabilities: routes, data-viewing and entirely different UI's  for different types of users (eg admin vs customer)

  • Lifecycles

  • Forms: Simple and advanced, validation, error-handling and pre-population

  • Services, reusable utilities, global features

  • Interpolation, DOM Sanitisation

  • CAPTCHA forms and the 'Are You a Robot?' test

  • Custom scripts

  • Build and publish a Progressive Web Application (PWA)

  • Firebase: Firestore Documents, Collections, Permissions

  • Cloud Storage: uploading and accessing images and other media types

  • Cloud Functions: running secure backend processes, scheduling, fine-grained control over your app

  • Designing for all device screen sizes using Ionic Grid and other SCSS tricks

and much, much more.

The videos are fast-paced, dense, and sometimes unforgiving. Where necessary, they're slowed down —but practical people with work to do(!) want and need information that can be employed immediately. Hopefully every single video delivers on this measure. It certainly does sound-wise: every minute is backgrounded by brainwave-enhancing, epiphany-inducing sounds from the brilliant Steve Reich.


NOTE: The Basics section of this course is where to go if you're stuck with or unsure about some of the core concepts (directives, interpolation, forms, data presentation, services etc). It one of the latter modules by design — because your first foray into any domain should be to get a feel for it. You likely already have knowledge of the basics: realistic, tangible (and personal) problems are how we weave independent and fragmentary threads of knowledge into something deep and functional. Starting with theory before practice is at minimum going to slow down learning rate, and is typically the most reliable and quickest way to become disinterested and eventually turned off.



There is no Right Way to Learn. There is the way that works for you. The course is as loosely structured as it can be without sacrificing on quality. In other words, the naming needs to be informative but not --verbose, the sectioning needs to have a purpose, and each video must be lean and to the point but also able to stand on its own. The Just-in-Time Learning philosophy must only be deviated from when necessary; videos should first and foremost be practical, concise, and time well spent. With all that in mind, what follows is a few pointers for navigating your way up Mount Everest. They're not all incompatible; use those that appeal to you, experiment, iterate, throw others in the trash. The critical thing to know is: formalities and structure and tyrannical rules about sequence are usually bad things, and freedom to explore and follow interest are good. This isn't school. This is you taking control over your own learning. And yes, it can — and should! — be fun. To the tips:

  • Watch the Outro before you start.

  • Move laterally. For example, you might do the Basics section first and then jump to the intro, and then the RXJS section, and then the Badass Todo App

  • Do the Basics section first if you're unfamiliar with Angular.

  • Criticise. Have the confidence to change things, improve the code, structure the code in your preferred manner.

  • View everything through a practically-oriented lens. Watch videos wearing your technique-coloured glasses, not those lawyer-esque analysis spectacles.

  • Use tools(!) — those recommended in the course and those you discover yourself. The heuristic here is simple: if it lets you get on with working on the most important stuff (the HARD problem solving, the stuff that requires true creativity), then it's worth it. All other benefits — it saves time, increases readability, better security etc — are secondary.

  • Speed up videos. Slow down videos. Install Video Speed Controller on your browser to enable easier jumping through and speed manipulation of the tutorials.

  • Use the supporting materials where possible (download the files, visit the links).

  • Peruse the GitHub repository when one exists.

  • Post questions.

  • Combine this course with other courses and brilliant bodies of work (Fireship on YouTube, Angular in Depth, The Net Ninja on Youtube...)

  • Use The Problem of Concern as your North Star.



  • Prioritise techniques and concepts over formalities.

  • Use Stack Overflow and the relevant GitHub Issues pages for errors and/or optimisations.

  • Know that things will constantly evolve, which means you shouldn't lock yourself in from the first day. This means being liberal with typings (use any and unknown quite a lot early on), and worrying about structure and clean imports and other formalities when things are working. The heuristic here is: let small fires burn. Small fires rid the woodlands of flammable materials, thereby minimising the chances of one big, catastrophic fire. This applies to pretty much all aspects of life, but is starkly manifest in programming.

  • When building for users, how you do things under the hood should be extremely conservative relative to the UX. This is most apparent with form input, where users should be able to enter typos and other different representations of the same data without any fuss. Under the hood, all data is converted and normalised into a standard form. For example with dates, you might let the user enter a date or use a datepicker. This means two different types of data. Combine this with the usual complication accompanying date manipulation (dealing with timezones, incorrect dates, offsets, readability, unix vs iso etc), and you've got the ultimate recipe for a migraine. A far-reaching decision to make early on might be to deal only with ISO strings in the backend, meaning you convert EVERY single date into an ISO. If the datepicker gives you a date object, you convert it to an ISO. If the user enters something like (10.12.2019), you convert it to an ISO. This ISO is how you store the information backend. Displaying it frontend then becomes a doddle: another conversion into the preferred format, and some interpolation — simple. This method works because ISO strings, like unix and javascript timestamps, are the same for everybody.

  • Don't worry about testing.

  • The less code the better. Condensed, concise code has more to it than beauty: by demanding true understanding, it protects against the illusion that information consumption equals knowledge. It doesn't. I can read one thousand lines of code and, thinking that the time invested and length of information absorbed is impressive enough, be satisfied with my grasping. But later on I end up coming back to that code repeatedly and making a ton of other errors because actually, I don't understand. Alternatively, I could breakdown (and even improve upon) that one line of code which resembles a spacetime equation, and not leave until I actually understand. And if I cannot understand, at least I don't have the illusion that I do. Finally, condensed code far better facilitates principles of modularity, flexibility, changeability, and debuggability.



This is a future-proof course. Just like any real-world project or company or system, the course and it's supporting resources (links, GitHub Repo) will be continuously updated — new tutorials, errors addressed, dependencies updated, and additional content added as requested or necessary. The course uses a combination of Angular 8 and 9, node 10 and 12, and Ionic 4 and 5. If you have any problems, a question or something else you'd like to talk about, do reach out.

keywords: ionic, angular, web development, ionic 4, ionic 5, angular 8, angular 9, typescript, node, kubernetes, firebase, npm, websites, progressive web application, pwa, future-proof, coding, programming, google cloud, aws, docker, git, role-based, notifications, reminders


1. Intro: What You'll Learn: first thank you for your interest in this course. And second, if you look at this, will be different from the usual course content centered around, not theory and formalities, but interesting problems and personal projects. And, frankly, just fun in this course has been made for you. It's made not to be watched and probably forgotten, but to warm you to new ideas, to tickle your interests to awake in those dormant dreams. It's not about information, but understanding, which comes from trial and error. Working on things that interest you knowing had to formulate an idea and testy. And then it's right would inevitably fails. School isn't about understanding. Modern education is in many ways, the antithesis off a landscape for learning is there for one surprising. How great is the number off? Uninspired, laborious, wasteful courses and diplomas and degrees and the like. If you dance the description, you know this course is weaved ball a threat off just in time, learning if you want to pull a personal or professional website or an application served on the Web or downloadable in the APP store. If you're interested in with development, I want to get stuck right into building that is into rotting riel production. Ready code If you have a dream vision, a big idea if you want to make some money on the side or write an application for your business or local community. If you want to put a dent in the universe while contained, nothing gold other than just writing. This is a cause for beginners and experts for doers, for people with a voracious curiosity for those wanting to turn from newbie to amateur, from amateur to professional. For people who love learning, introductions usually tell you what you're going to love. That's boring. But if you must now try the outre video at the end of the course, which rapidly skims over the numerous learnings on offer. Of course, you can also proves the course content. Re read the description. Re watch. This video will shoot me an email, or you can just jump in and try things out. You don't know what you don't know. You might just made the best decision you ever made. Thanks for watching hope they'll see you on the other side. 2. Getting Started: all prerequisites, aside from genuine interest, are secondary in this course that said familiarity with JavaScript probably a no based framework lot react Angela or an IQ would be ideal. The only other thing is an Internet connection, which, apparently you have a decent machine on the code. Editor. V S code is more choice on the one used throughout this course. The next steps need only be completed once for the entire course. The first thing lead installed is node. The best way to do this is with no version manager, which enables easy installation on easy switching between different versions off node. Would you something quite important if you're going to be doing a lot of development? Alternatively, you can store only a single note version. W linking the resources to a guard for the option for node version, manager or envy. M had over to the get help documentation. I'm follow the instructions for your machine. It's relatively simple, and detailed solutions to common problems are provided near the end of the docks. Won't you installed MBM and open a fresh terminal on M V M install with at least version 10.15 point three that on Version 12 is used in this course interchangeably. Next to run NPM, install flag Jay at Angula CLR Ionic types grouped Firebase tools. This really stole the important packages at the global level. Now we're going to set up a basic Arctic application with fire base. It will take only a moment and lays the foundation for the next few sections of the course from your preferred directory run Arctic Start. This will take you through some basic questions, which could also be passed. His options on the command itself. Give the other name and choose a basic template while site installs. Jump into the fire base console and he creates a project. For now, analytics aren't important. Accept the terms and create in the projects. Authentication. Tap. Go to signing methods. Here we have a list of all possible avenues for authentication. Well, that's typical. Email and password signing and Google Sign in in for Twitter and Facebook, as well as the less common. Get up on Apple Game Center, next year's database initialization. Hop into the data based up on press, create database starting test mood and select the appropriate region because you're following a course. Choose in the region that covers your coronal. Keisha is a good idea. In production applications, you would choose the region that covers the most users. The documentation is a place of finding out which regions use. Finally, in the storage top, click get started and again, a story location. If one isn't already set my back in the editor one for by slug it, this will open a browser, probably new to log in with Google. One Stone returned to the editor and CD into the new Applications Root directory, then run for base in it. Again. There will be some questions about the configuration. Hit the space bar on Faisal Functions and Storage. Jews Tops Group for the language. Yes, for tears, Lynn and yes, to install dependencies now the final step is optional. I might not be necessary in later versions of Arctic, with the version I'm using here. Arctic includes three packages or necessary for our use case. They are our nick native packages, meaning there for classic downloaded and installed laps we're developing for the Web specifically appeared. We way the various locks but out by these packages can be annoying. So here on first removing them from the no modules, then deleting all calls in the APP components. Yes. And at model ts, you can also delete the up component spec ts far and now everything set. 3. Tools: can't you got the off? Miserable lives are pathetic purists the exemplary explorations off the explainers who advance our understanding off while code, which now rules the world on the concerns of specialist tinkerers whose critical contributions make it all possible, Great tools are bedrock to productive, creative, smart. Perhaps most importantly, gratifying development tools can be the difference between your spent aren't conceiving, marking grope on producing from scratch the M V p of your big idea on doing it over a weekend before your Monday morning meeting with investing Mr Deep Pockets. It could be the difference between internally pleasing, happy, purposeful work on enormous induced by laborious on creative, boring work. It could be the difference between a five minute book fix and patch on $100,000 mistake. It is the difference between a box of matches on Flint tools made possible. This unbelievable civilization. Yes, tools should be top of your list of considerations. There is important as a big problem. You're trying to solve the discovery of a tool my even solved the problem itself from your broadband's be to your quoted war, a preference from the browser of choice steel preferred programming language from the ram and processor of your machine to the theme of your favorite code editor. Tools matter. They could save you hundreds of hours, a decent amount of dollars on a significant proportion off sanitary. Speaking of code editors, there's a plethora of options out there, the most popular being sublime atom brackets and V s code. The last one is leading our charge into the future with a lively, enormous and ever growing community of passionate engineers, hobbyists, entrepreneurs and so on. V s coat is rightfully the preferred choice off the many rabbit holes to go down extensions . The massive marketplace of imaginative, time saving, weird and wonderful tools built by altruistic enthusiasts boarding opportunistic businessmen and women and everyone and everything in between. Extensions are the free candy store off the programming world, and the candy is gluten free. In fact, it's highly nutritious. You can ensure eat as much of it as you want to. On the menu in this course are several exalting, energizing, colorful finds that can and will leave a lasting memory First. These angular snippets, the one by Michael Moreland, is fantastic and used exclusively in this course. But there's a couple of others work, Jackie nine, and many can be used in combination. John Popper's extension is perhaps just as good. Likewise, and I'm snippets. Extension will also serve you very well, especially if you're not yet fluent in Ionic. You cannot call us. Write your own snippets, but why bother when you come on click install, either or both of these are rather loads of code. We just a few characters. Snippets are as good in haste tomorrow as they are. NTS files next. So please rainbow brackets a tall for on blurring the lines. When you're dealing with deeply nasty functions, recursive logic and so on. This could be extremely helpful. But whatever your project, the next Amazon, or just another to do out because why not rainbow brackets will enable cognitive bandwidth to be better spent. Some extensions are useful early on, either in a project or in your understanding of a language or framework. Snippet is an example, and some a lot of D boogers are needed, in which later all those consistently bear the tastiest fruit. One such extension is PATH intelligence, which in addition to the native ES code intelligence, makes falling ports a breeze. NPM intelligence is also worth mentioning obvious. Could icons providing much needed upgrades, the default file and folder icons? You'll get access to a great many different styles for the falls in the project tree, mostly categorized by language under platform type for which the extension will prompt. Knew about if it recognizes your projects, dependencies. Customization is also an option. As you can see, I have quite a few extensions installed here. The full list of links can be found in the description. Aside from the code at its are there are some of the tools worth mentioning. The first is flight got a beautifully simple and ridiculously valuable manager for your machines. Clipboard, it say's that the 19 on copied or court items and provide the customizable pop over for browsing through every single one. Of course, this is useful for all worked on on a computer, but in developing, you make something like completing forms of mark data, duplicating code copy pasting from stack, and so on. A doddle stepping to the line marked chrome or rather, the chrome extension marketplace. One of the reasons, but perhaps the straw that breaks the camel's back for reasons I'll get into in a moment. One of the reasons I use chrome instead of other browsers is the extensions. Just Thought We V s Code. There's a boozing marketplace jam packed with predominantly small but mega handy additions to the standard served website with scroll while plus bookmarks, functionality of the browser all mention to Auto Scroll, which is pretty self explanatory. It's especially useful on Twitter and video speed controller, which lets you turn your keyboard into a fine grain control out for YouTube Vimeo. And, in fact, most video served on the Web, whether it benefits may or not be more even work on this very video. Finally, I have to mention the brave browser. If you don't know about him, get over to the salt right now and check it out. The only drawback on the reason it's not using this course or why it's my browser of choice when developing is the inability to add extensions, though that is not an outdated thing to say, because brave have made it a simple is it using chrome? Which means it's time for me to end this video and schedule a move 4. Authentication — 1) Login: we're going to implement firebase use an Anglophile library. There is great documentation on Get Hope with guides and how to use core for based features like hosting fire store functions and messaging from the root of our up directory in store , angle of fire and fire base, then in the APP model TS for important necessary modules as well as the APP environment for include annular fire office in providers. If cost and performance are of concern, it's important to tell firebase which regions use Germany. You want to use the region closest to the majority off your users information on which locations come under which regions could be finding the Google docks. There will also be a link in the resources section. Notice We've called initialize up on the annual fire module and passed the firebase conflict variable, which we're now going to create in the four Vice Consul Trick the ad web at butter. Give it a name and he register rob, Then copy the firebase conflict property to the clipboard and paste it into the involvement object in the involvements Fall next general locking page with Arctic G page logging. This will give us a standard Onek page within the CSS module Hedge 10 Mile and Tears far. We also get a suspect for in this course spec falls, and testing in general is not going to be covered. We'll get into the reasons later in the course. It's good practice to separate APP Infrastructure code from user interface code where possible for these weaker and at core directory into which would create a services directorate within that create fall named all service ts. If you have the angle asleep, it's extension is thought simply top service and select Engy service from the pop of a menu when it's a new far. Sometimes it could take 2 to 3 seconds. For this to appear. You can, of course, talk to service, but it's a good idea to make full use of snippets, intelligence and other such tools that could down a laborious work and a late to get on with the more interesting problems in the decorator set provided into route these tiles angular To make the service globally available in the constructor, we inject annular fire roars. First you make a logging method, which takes an email and password. These arguments in tax is an example of the construction. He tells the function to peruse the incoming object argument for keys named email and password their values and become available inside the block. Deconstruction will be used a lot in this course. He saves time that makes for a cleaner code. Are looking simply returns the signing with Human, a passable method on the angular Pharrell's class, you can think of the entire An unified library is essentially an angular base of wrapper around the fire base. Job is good. SdK We talked help for lectures like guards on native up manipulation methods. We're also going to need love. I got method, which is that simple. Now we move to the log in Page DS, fall and eject the all service in uniform builder on angular router on a logging for invariable, create any form group with the group method of the form Builder, which takes an object with the keys is the form, field names and values as configurations for that field? There's a couple of ways to do this. The easiest way is Laakso, an array with the first item as the initial value optionally ika create an array of validators as a second autumn. Don't worry too much about the details here. This and everything else in the course will make more sense every time using by which I mean right test It's right and repeat formed on. Now we need to submit method for the phone creators of meat method. To get some intelligence on the income reform, we can create an interface, then cast it to the incoming form data. We're also going to mind this method of icing function. First, we call are all service lugging method, passing the entire form later. Object as one argument. Wear white that the symptom navigate to the home page using the angular Rusa. No, to design the locking perch, we're going to use it on a grid and credit basic love. Inform with email and password fields on a logging butter that is deciding what if nobody dies has been answered. Note that the log in button cause the submit with that of the phone, which caused the logging method we just created as an argument. It passes log, informed our value which, quite importantly, includes only the values from the form in object. Former Before we testings out, go ahead and change the default landing page of the up in the root module file, changing from an empty string to logging, which would alright users to the log in page. So here's our page. When we try to log in and area is locked, why is this? While it's not Bob who's the problem, It's The firebase doesn't recognize the details. There are several ways to create users. Invite base. The most obvious way is with the registration form. We'll get to that later in the course, but for now, let's create Bob via the council. Go to the authentications up and creating a user. Now with the email address and password of union user tries it again and they reduce No, no errors were routed through a home page. Finally, we need to make our password form. We would hide the characters on entry, simply set the top, actually, being on the import element to password 5. Authentication — 2) Google Login: most websites and naps today have alternative signing methods. Lot, Facebook, Twitter, Google and so on. The most common is Google is also the easiest to implement and probably the safest. Hence, that's what we're going to adhere in the four based console. Go to the authentication type quick signing methods and enable Google signing. Make sure you man is selected in the project Support email field. You'll see a popular different options here for Microsoft. Get hope, the Apple Game Center, etcetera Nafisa Code In the all service we created earlier, you poor far based off using the since actually see here. This is important for tree shaking, which in name was terms is how your application drops unnecessary falls and modules. When it served to the browser, they were correct. A simple Google logging function. Here we're combining two functions into one. The first is a creation of a new Google with provider. We passed that as an argument to the role of an angular fire signing method. We speak to this method from my log in page in the ts creating method for the Google logging bottom again, we simply await successful logging in and then route to the home page. Finally, in the Hasty Maher on a Google Lockheed Martin somewhere, let's try it out. So we stock you weren't into this era here, which Google have yet to properly address within a clear documentation or automatic fix. It seems to be a problem with permissions, which with Google is usually all gone under the hood. The first thing to ensure is an email was selected with a neighboring Google signing. The second, on largely solution, is to click the learn more link on the error page that will open up the Google Cloud platform and take you to the water consents. Green simply give you application and name optionally an image and then hit Save natural again. And as you can see, it works just fine. They have it give a logging in under two minutes. 6. Authentication — 3) Login Errors: curly errors have being locked into the terminal. This isn't going to winners. Any design awards we might be in for a chance if we start informing the user about what's going on, do you agree to the hasty male? And that the conditional on item with this front element that inter plates an era property , the on our terms will show only if the air property is true thing inside the forms of it method. Could the current code and replace it with the try catch statement. He saw Troy at the code back in it so it catch loved the era of the concert every statement and said, This is the era to the past. There a message, I think create the air of property. Now go ahead and try to argue with on created user and there's our era. There's a host of possible areas. We fire base. They are likely ever only running to three or four. Issue probably set up a firebase era is an object. The two important properties only are the code and message. The code allows us to determine which kind of error has occurred, and he struck the user accordingly in the Catch Block rights. Which statement for the common error codes, namely invalid email or password. Recognize details on Bandel Disabled users. Also right. Catchall before error message for rare new or unexpected errors. Now writing a customary message for invalid passwords is not recommended by Google because it gives potential hackers a hint, namely, that they got the email or use the name part correct. And it's a good idea to merge the Invalidpassword era into another, such as the using our founder. You can make this cold more consultants by using deconstruction in the cutback argument. And now, when you run into a particular our especially what caused the message will be displayed to the user. 7. Authentication — 4) Login CAPTCHA: Are you a robot? If so, start now. This course isn't for you. If you are the robot king of the world in the year is 3001 Be sure to keep looking after the humans. They're actually pretty decent. Would you get to know them? If you are a human who was sick to death of the Are you a robot? Questions Then refer to the answer given to the robot Because here we're going to implement that. Are you a robot capture feature into the application? Indeed, it is a feature because it makes your application far more secure. Currently, we felt locking too many times within two smaller window firebase will return a code that we get to rock custom Logic four, he said we get this mysterious message about monkeys on Planet of the Age was fiction, right? Right in the switch statement for the lugging errors at a case for or too many requests inform the user with a message, then called the stock present capture. We'll get to that method in a moment. First jump into the orthe service and create a recapture form generator. It takes an arbitrary, hasty My element I D and optionally on options object. Then we simply return a firebase. Crazy, very fire all the necessary authentication. He's don't under the heart now for that present capture method. Make it a sink, and first, to find the idea of the element in which are very far will be presented. Let's call it captured container. Next we grab the element with document that get minimum by day and set it in HTML to an empty string. Then we set capture solved to force. This step ensures that a fresh verify is called. A few surpassed the robot test, but again, files log in too many times. Of course, if it repeatedly happens, this had gone forever. We could also implement additional logic that can't see my time. This happens when over assigned, Lemme thes more, get directed to support a day and salt for robots or the unified field theory problem to present capture. We seem to call the recapture generator in your service. The cool about property is a function called where the generator or host, when the verification succeeds, calling render presents the capture form. Finally, we need to page him out crowded dif good place to this would be inside the conditional era elements because it's an item we can pass it. A Slav end said. The idea on Hayden attribute to true if the country sold always yet to be opened things capture solved property. He's a symbol Boolean in the t s file. Now we see that the question is posed after consecutive failures because Google knows that I am indeed not robot. I'm not here asked to identify cats and for hydrants, but you might be so be prepared. Suck before we finish. There's a slight problem. Click fever resulting duplicate verifiers. This will lose his points. The easy solution is to disable the log in button. If the capture has at least once being presented on does Not being solved. Onda Now it performs. 8. Authentication — 5) Showhide Password: the show High Password feature named Me The Abilities of You, your password as you're entering. This is surprisingly lie entrant to the global stage. For many years, people entered stars and prayed as the number of possible passwords grew. To do least lengthen. Attention spans shortened. Andi, I am locked out of my account complaint, Scott rocketed. Someone somewhere out there figured out that he might be a good idea to give users the option to show or hide their password. In the copy, Cat effect went to work. Now it's everywhere, including soon in our application with our Nick. It's that simple in the form field html code and important to the item, said the Phil and slot attributes to clear and End on Click. We want to set a show hot property to its opposite value. In the bottom. We have a conditional icon. You sure pass it is true. We display an eye, if not across that I made the type attribute of the import conditional. What's happening in square brackets? If your password is true, the talk import is set. The text, if false, is set to password. Finally declare the show password variable in the ts far I'm a dog 9. Authentication — 6) Signup: Now we're going to create a use. A sign of feature. The first thing we need is a new sign of page. Generate one using the Ionic CLI in this yes far create an interface for the incoming form . Data of basic details like name, date of birth and a handle full of sun in Anne Meara. And a password. Of course, in injected form, builder Ruta uses service or service on dining. Toast Controller will be creating the user service in a moment. Create the sign a form with some basic but reliable validation requirements. Will also need some options for the on date picker Credit date on conflict object with Miramax Properties. Then we have also meet Method it a sink and deconstruct specific form. Data values. What's assigning all the rest to a form data property, right? Try catch statement and he saw a tribe. We await the create Use a method called on your service to entry Pass owned the email and password Democratic. That instance from the airport of the debt on picker, which isn't always so string. Get the day month and you set them along with other form data to a basic user data object. This will be the users database record. We will also set the users the unique I D, which is also generated by five days. Then we call up there on the user service, passing the news, a document on way free to complete once it's complete. To start with the log in, we never get to the home page. Toast always goes down a tree are as you spoke with a welcome message on the user's name, D materializes within three seconds. Now for the hasty mark. Working with the on A grid is generally a breeze. Perfectly censoring elements in a four page is still not simple as it should be. A give the main arm wrote a class of Roe Full Hoitz and in the APP s CSS, or preferably, the global that I see assess, Fall said the on agreed and Rosie A says, is shown for the sign of form. We have basic on items with inputs on floating labels for the day. Picker we use on daytime, which uses options from our data on conflict for the handle will do something a little different, right? The item initiative with the spun label as its first child. Use an iron note with this lot of start to give the at sign prefix. Then we have some more form fields and the submit button, which hooks to the form Angie submit method. We can also set this button to hide if the form is untouched. Some stars with a handle field on this chicken up. Okay, bland. But on the way next year, a new service called DB Service he saw the Decorah said. Provided into route if you followed or the videos in the course. The services directory is a good place to nasty you, poor Daniel. If I store and query FN from angular fire, then inject Magnify store in the constructor as well is a macro operator on observable from mark shares. This service would be the way components and pages in the application interact with fire store. Our first method will be for creating new force or documents will call it set dark. It takes a path and data object. Then we simply pass the path to the annual If I stored up method call set with our data. This rice data to the past specified. It is also a destructive method, meaning if anything exists of the path given it will be over, written this committee Sebold with a simple extra argument. But I like to keep a dedicated method for such functionality. To be sure. Clarity, we can use a special kind of comment. Former Common law. This gives us the intelligent with which will be very familiar if you use the S code our next month and will be uptight, Doc. It is identical to set dark except for one crucial data. The most true setting past as an object merge will rot new documents and merge data. If a document already exists at the location, then we have two methods of grabbing data from Father's store. The first looks for a document at the given path when he turns the data, and also it's all day as an object wrapped in an observable. The collection method is similar. He takes a path and optionally a forced or queary. The path argument should match a collection if no queries past the method returns all documents in the collection at the path the documents are returned again as objects with an additional already property. The idea is helpful toe have on hand as you come to realize when you work before store more because multiple documents might be found. The return value is in Iraq the query capabilities of forced to our video or two on their own in the force of luck imitation. It's very useful. We just know that what's defined as optional here, it's always a good idea to use a query for performance and security reasons. More importantly, for cost the dollar so folks on each method indicates that this property is or returns an observable. It is good practice to make distinctions between observable those and other properties on coronet. This is the best the most common way of doing it. Next, Create user service just like the DB service. A user service will typically handle all methods related to the Koran user on their data. The first property is a stream of the uses data pulled directly from fire store. If you are unsure about observable, are express or any of the operators used here, check out the Ark share section of the Arctic angular course or visibly learn Rx Jess website, which is a very useful resource even for experts. Will you switch map to listen for changes to the users. Authentication statements I use the locking triggers a query of the fossil database looking for the users data. The query uses the uses You idea to find the correct document. It isn't assigned to the dock s property as an observable. The tap operator is used to set the first name, and you are de of the EU's out for quick and easy access throughout the APP. If you use locked down, we return an observable of no. Then we have an update method, which is what we used to update the user's data. He uses the you already set via the top operator to build the path argument. Now it won't be to the or service. Assigning is a property to the or state of the angular fourth instance, the Allstate is an observable of the corn authentication status. If subscribe to or listen to with an operator, locks, which map this observable will admit when the user locks in or out when they log in a firebase use a record is omitted like outriggers, a full CIA mission. Finally, we need to create use a method which caused the admirably explicit. Create user with email and password method on Goto at some additional GOPer stall to the honor Great here, which would give us a noise Instagram esque effect. Finally, at a sign of bonds of Larkin Page, that one click will route the user to the sign of page. We were sort of back to log in button on the side of page, and there it is. Click sign up and to the basic details on press submits brought to the home page when presented with the personalized toast in the Far West. Console Weaken. View the user record on data. But what about users who authenticate with Google? While we can create a new use, a record every time a new user uses Google lugging their application, what chicken that is new user property Return ball. Google off. In our Google logging method, we say, if is no use, it is true. Create a new document with their data you could like to request. Further information will give them an option to update their details with an account or more profile page, which indeed will be looking at later 10. Authentication — 7) Signup Validation: So here's our sign. A form if using makes an error or as every user like me doesn't just plays around with the fields, we get these red lines courtesy of Ionic. But what did they mean? It isn't clear? What is clear is that we need some more clarity. We can't do that by listening to events on the form and updating your accordingly. Nissanit es fall the finest getters for each value on the form than in the hasty Val. At a conditional span, elements good places beneath the on import was still inside the item. The conditional expression is if first name is invalid and has a value then despite this element, first name refers to the getter, which returns a form control instance which contains a host of checks are valid, invalid, dirty Christine and so on. Then we simply repeat this logic for each field. Finally, at some CSS for the error message. Now, if we enter something processes invalid by the form validators, we get this error message boy too little, too erratic from while RG Just how fast does this form expect us? The time we're not robots after all, this is actually a common problem with angular, and it tends to be resolved or are in custom validation ology instead of relying on getters . Luckily, with our Nick, we need only sent one attributes. The Arctic import, like many iron that you are components has many properties that enable host off customization. One of these is de bands, which allows us to specify how long after a user's finished typing we should let Angela know about it. Go ahead and add the attributes to one or two relevant and test it out. He takes many seconds. So we sent 1000 for one second, which is Germany. Good, say, and now the user can at least do some sinking whilst they talk. 11. Authentication — 8) Monitoring Authentication Status 1: monitoring the authentication status of a user is a common need. There's several forms of observations and even more ways to do it here. We're going to simply monitor whether the user is locked in anywhere, not whether they're active or even recently active. It's one of the least evasive forms of user observation a company or developer can perform , but equally as uninformative. The first thing we're going to do is create a locked in property on the user document. The benefit of strong typing using toxic interfaces and tops is that it can quickly make global changes. The objects and variables the renamed symbol feature is brilliant for this. We're just the intelligence errors are useful for pinpointing exactly where there are inconsistencies. So first World Day in the interface, if you have two more interfaces, have only stop variation. What we do here Astana practice in typescript is to write a basin to face containing the common properties. So here we do that for account type, created out, U R D and handle, and then the locked in property we made. The other interfaces include this base class within extend statement. Next in your service, create a property called new logging, which will be a 1,000,000,000 indicating whether this user just locked in. This is not to be confused with a new user, so we can add a comment for intelligence there. For each method used to log in the user, we set the new locking property to true in the user service where authentication changes are observed, we chose whether new logging is true. You'll be tears. We update the database property. Then we set new log in in your service to faults. Finally, we create a new middle man, A thing like that method and I use a service. You start to try block. We'll wait the document wrong to set logged into false and then we love the user out before re compiling. Change all. I got calls throughout the out to instead use the use of service method now destroyed out walking and then check the database. As you can see, nothing is true. Then when we log out reversed, the folks at the time this video was recorded for so have just released a feature that allows either full or some variation off subscription monitoring, which, if on crack, allows you to know how many force or streams are commonly active. You might want to check that out for base. Also offer a method for fine grained authentication status observation. You can find a link to the documentation in the resources section. 12. Authentication — 9) Role Based pt1: role based authentication and raw, specific capabilities are another very common need for developers and companies. It can take many different forms. Sometimes it's simply blocking access to particular routes. Sometimes it's full blown to the point that it's basically a different application. We're going to cover the spectrum here, starting with separate sign It flows one for standard one for enterprise. We're going to adopt the sign of paint you currently have in creating a new one. Very similar. We name it standards on a page movies position in the tree to inside a standard directory itself inside a standard directory grand enterprise structure and crashing into Roy's son of pages and see a lot. The code is the same as a standard son of page. Except for the form, they might even that creating an entire page to care for only a different form is overkill . But the benefits of separating concerns aside, there are probably many more things that you want to do differently between pages. Different styling, animation and so on notice in our submit method that created is set to a method called timestamp server. This creates something called the fire store, time stamped sentinel which went uploaded to forest door converts to a time stamp. You can create a sentinel for the current moment, which is what we're doing here. You can also pass it a custom date in the future or past. Once again, we never get to the home page and I'll get success. I'm presenting toast. The Hasty Mo has the same structure. Now let's spice of our home page in the T s credit data observable the streams pretty much all the user's data as one flat object in the Hasty mile made the arm content conditional show only if the data observable when subscribed to a mistruth data a sign that data toe available name data noticed it doesn't have a dollar sign suffix, which would instead call the observable. We used our Nick grid rapper as the parent For some Angelus, which logic each are. Niekro will represent a different case for the value of data that I can talk, which will be either enterprise or standard. Then we have a nine a card from styles and then add button for enterprise in the standard page and vice versa. The final change we need to make is in the apple two module because we have to sign up pages week unless them under one path. Nesting on this has benefits other than more readability. So just enabling stripped the control of a route data and super guarding on redirecting, including the garden, the parents or level resulting, both paid. He's being blocked from knocked in users. Now let's try it. Create a new enterprise user thing. Check the database to make sure the account top and everything Galaxies correct. If you've deleted the standard user from earlier, just create another from here. You can skip to part two if you wish. We're going to create some models for data and make a couple of other improvements. I use cases suited to a name space. So you are export. Declare name, Space user. We can our nest. Each account tops data structure in this name space, which will make it very simple to use throughout the app. Know the timestamp value. Here. This type is available on the fire based on forests or instant. I like to export it as something sure in the same place. I import firebase as opposed to multiple firebase imports on door. Many chain statements. Let's use this model first. In the use of service, cast the data observable tone observable of top user, which is our name space. Use the enterprise and use that are standard because the home page is used by both. The data tops could be either and corny. There's no simple way discriminating between the to the emergency. Besides, it's not really that important. If you're using typescript and intelligence is a wheelchair or than helpful assistant, you may want to review your philosopher calling. The to day method on the force of times down will convert it to a job script date, which is easiest to work with in the front end and could even be presented in roll form in most prizes, almost are going to make some improvements to the data structure. Feel free to copy or change into something different. The point here is the logic and modeling, not the formalities. Next create especially enterprise only page for our enterprisers. We could see there in the Uprooting module to protect it from scandalous wrongdoers. We need a guard creative enterprise only guard using either the cli and sleep. It's all writing out manually said provided into roots, and he gently use the service. And Ruta made the character of a method. I think then we check the account, or but mapping to the users. So this document is terrible and divert me to a promise. The first operator is critical here. Because he ends the stream Live seems have caused a guard to hang. If you count his enterprise, we return true, thereby allowing navigation else we read or write the user to the home page, using the rooted up past your arm method. Finally include the guard in the root path, then save on recompose locked in his enterprise. We can act. Is it just fine but locked in this bob a standard user? Our attempts to find the treasure are halted and was sent back to the damn tone page. In the next part, we're going to look at a more fundamental, secure, fine grained method for dynamically served, role dependent features uses quite functions and four based custom claims, and it's the way to go if strict separation of identity, it's a critical concern in your application 13. Authentication — 10) Role Based pt2: If you find this course from the beginning, you should have far based functions already initialized. If not, don't worry from the directory root of your application room for basing it functions and use it for options provided four bases installed on your locked in. You should let me go to follow this demonstration within the Functions Directory in package that Jason changed the note engine to 10 or later. If not already. Don't he saw it sauce? Create two falls. Create user that ts and confidante Yes, when working with cloud functions, I'll just set a conflict for that sets some default options, not the region, speed and memory to use. It also enables you to create clear import statements in other falls like this. Where were important functions and four back at me and using the star syntax. Then we export them a simple variables. Be sure to court initial rise up on the admin instance. I'm also here creating an object of regions with the full set to the one closest to may, namely your west to you can find information on regions and zones in the Google Cloud. Documentation in create user ts, we first create an interface for the day, A pass to our cloud function. Then we have an assert data function. If you're unfamiliar with advanced typescript, this might look like a quantum equation. Just copy what we want here is somewhere to check the incoming data for validity. We can do this without the talks grouped with. Then we won't get the intelligence and debugging cloud functions could be the biggest pain in every Larry page is us. Basically, we check whether the incoming data has a particular value. If it does, we return the value, if not throw functions factually GPS era. Next is our create use a cloud function. This Korbel function is going to replace that create user method in the front end all service which uses angle of fire. Here we're using the firebase admin sdk, which can only operate with insecure closed environments like that in which cloud functions are deployed and run. We set the region in which the wrong dysfunction before calling Haiti TPS that on call which gives us a data and context object data is what will pass from the front end. Context contains basic information about its execution, like the source timestamp on region. Make it a sink. You heard it here, where promises are used. Use, I sink. There are rare exceptions, but it's more likely you're a billionaire than that you're a beginner and have such a problem. Next, we serve the email password and can't talk values of the incoming object. It doesn t assert data function. All the logic here depends on each of these values, which is one era must be thrown if for any reason, they're not present using the human apostle. Require a new user and grab the u. R D using deconstruction. When that succeeds, we set custom claims on the user record. Custom claims are principally an independent addition to the directly immutable firebase use of record. When you create a new user or log in using fire base, the user record is what is returned. It contains basic information, like a user's email on expiry, token, display name and so on. Every user also has a claims record containing further information about the user, on which can be accessed with a separate less known about method. The clans record is manipulable, but only via the firebase happiness decay changes made are remembered by fire base under the hood as custom changes. But it's a good idea to sit down directly on a custom object. Here we set the custom claims to an object containing a single property, namely the account I. Finally, we need a way of getting this information back to the front and client. Then they need to be able to log in using their new credentials. The human and password they used to lugging would indeed work, but we want mistletoe happening. One step. It's not the users responsibility to first create an account and then be asked the log in If we are to do this securely, it means not passing passwords around, which means we need a different way to authenticate the user. To do that, we create a temporary custom toker and end the function but returning it to wherever this function what securely called. We can then use the logging with token method provided buying in a fire. The index ts fall towers clad functions which functions to deploy. If you have only one function you could is right in the index. Yes, far indeed. Currently, when you first unit clad functions, the sample code is a simple hello world function in this file. Personally, I like to give each function it's on file. Then you can simply export. The function locks up before we deploy. We need to enable back in token creation permissions in the Google Cried console. Open the A P R library via the hamburger menu, then find the I am a PR click Enable I am stands for identity and access management. Once he's done back in the menu, find the I Am and have been option that brings up the permissions tap. Find the member with the email address Project i D at AP Spot that G service account dot com and click the Edit are gone under select Role Foreign Service account Token creator and hit Save Now deport the function. In the meantime, in the or service inject, annular fire functions were going to call our cloud function with a method called Create User on server name. So explicit would probably win. It's a Firebase award for extra explicitness here. I'm using deconstruction to make clear the arguments expected by this method, namely an email password on account I. Then we call Angela Far functions Haiti TPS Korbel, passing the name of our function as the only argument this returns are function instead of raw in another line of code, we can upend the function with a cool passing. Our arguments annual far functions return. Observable promises are much easier to work with, so we convert the result to a promise on returning. As stated earlier. The far based planes record is separate from the user record. This claims record is refreshed every time the user is authenticated. So just when they're locked down for security reasons or when the token exporters and they have to look in again, the clans record can also be said by force, refreshing using the get I D token method of the corn use of property and passing. True as the only arguments, this method is an alternative to asking the user to sign in again every time there Kristen claims are updated. For example, if you use a wanted to upgrade from standard to enterprise, let's give the method some intelligence for clarity to log in. Using the past down token, we create a logging with token method and call the pertinent angle Phi method for ongoing access to the claims we create user custom plans. Observable When the i. D. Token resort property of angular fire suite at Atocha, we peruse a token object for a claims that custom property, which, if we don't things properly, will be the custom planes we could figure on the server. Currently, that's only the account type, but on casting the result here because claims are useful for the values. Mark External, a PR credentials. Lovett customer strike by day, get account time Method will grab the claims record and return only the account talk value . We want to know what kind of user is locked in a soon as possible. This, of course, could be doing with separate logging close, but this isn't secure. Norris Fasters query in the claims record as soon as the user authenticates and we need to make some change to the user offset observable with switch map, we say when the user credential is present, meaning when the user is locked in, we map to the claims record and then we turn a merged object of the clans record and use a credential or the wise return and observable of no. Now we must change our initial database query for the users data in the user service. We read the account type passport, the Allstate user observable and change the query path accordingly. You can also make any other custom changes like if you use it is a standard user setting the name property to their first name, and it was an enterprise user. We use the company name next to improve the new create. Use a method in our sign of pages. First, the enterprise page. Within the try block, we use the return token to lock the user and because when I speak into the server instead of the client's side firebase sdk, the user creation will take a little longer. However, cloud functions do perform faster than more. They're used for better. You X will display loading element once the user hit Submit, we create a loading instance using the controller outside the try Block the catch. Blunt doesn't have access to the try block, so if an error occurred, we wouldn't be able to dismiss it. Repeat the steps in the standard sign up page. Finally, let's change the log in page to directly uses a different places, depending on their account type I want to use a log. Seem we call the or service get account talk method. Enterprise users are rooted to the exclusive enterprise. Only page standard users to the home page. Time to test it out. Unless you want an additional puzzle. Delay any previous account via the Poly vice consul. Create an ordinary count. There's are loading element. And then we brought to the home page. If you want, check the database the logo and created enterprise a camp, and when you know it, what brought to the V I. P. Page. So they have it. Two methods for role based capabilities, both of which you can do without the user knowing anything, which, of course, is exactly what you want. Claims are my preferred method. They're more flexible, secure, more lending to bear performance. And frankly, the logic is more interesting. Well, perhaps you have a simpler use case or, for some other reason, prefer the method disgusting part one, in which we rely on a simple data by setting each into their own. I guess. See you next time 14. Guards — 1) AngularFire Guards: There are no two ways you can write guards in angular manually or using angular fire. Both perform exactly the same on both Lynn well, to most customization demands. Of course, if you're not using fire based and angular for guards will not work in this video. We're going to look at angular far guards. So if you're using your own authentication or some of the service, check out the next video on classic guards in the A pretty model. TS for import can activate from an in a fire as well as the redirect on, Authorized to and redirect Loved into pipes. These parts are essentially functions with basic, if else logic, which return instruction for the router. We call each function, passing the redirect assassination path as the only argument in an array. If unauthorised that is not logged in, a user should be directed to the log in page logged in users should be brought to the home page. Now we apply the guard by emerging it to the person and path using the spread syntax and can activate method. With this configuration, everything will work fine. We'll misspelled route and tight Viva will result in the use of being brought to a white page. So we had a wall card room using a double asterisk as the path on the home page as the redirect Angular will now send all on recognize routes to the home page in the out model TS on angular Pharrell's guard to the Providers array. Do you properly test you? So we need a lockout feature in the home page, a basic I'm button in the Hasty Mile. Then in this yes far. We call that I got method of oral service and then never gave to the log in page. We're on except or if you already live, he'd save and recomposed. We're locked in and calling reviewing the home page when we look out and try once again to access the home page will brought back to the log in page. Likewise, when we're locked in, we can't access this on a page, which, of course, is how it should be 15. Guards — 2) Classic Guards: manually composed guards are more preferred method when using fire base with Daniela annually for all. Scots are great, but there is something about the explicitness that I like. Perhaps I'm just the stubble conservative, voluntarily stuck in a time warp, hoping for a return or at least greater appreciation off classic methods. Anyway, classy gods start by creating guards directory here. We nesting under the AC or directory, then create a new fall called Logged in Dark Guard Duct. Yes, if you have angular sleep, it installed topping guard should activate the popular menu. Select can activate, guard and rename the class to locked in God. As usual, the stupids provide more code than necessary. We can believe 50% of this creation of the guard named unauthenticated. Use a guard and make sure both have provided in set the route he saw the decorator. The setting tells angular. The guards are core components, so there will be loaded with the at first loads. In the locked in guard. Inject your service and angular router amid the can activate method a sink. Next we call that is locked in method in the also is to determine where to send the user, if you use it isn't Ogden we returned, true, thereby allowing navigation else. We never get to the home page. The Eastern Deem method is very simple. He grabs a single snapshot of the user offset observable, using the first operator and govern the value to a promise. Finally, we have to apply the guard to the relevant roots in the APP. Truly ma, joyful at a can activate property to the lock in and sort of re objects city to an array containing locked in God Are the guard is identical except for the authentication check. This time we went to allow navigation. If the user is logged in and redirected lucking page, we're not. It's also at a console warning to make sure things are working properly. Before, I didn't guard to the home page roots. Now from the lucking page, if we try to sneak into the home page, were sent back to the lucking page, and there's the warning. Similarly, when Lock Team were refused access to the Larkin page and so on a page each time pulled back to the home page, and then you have it two ways to do angular guards 16. Structure — 1) Core Module: every time we generate a new page in Onek, 2 to 3 modules will be declared in the module. Typically, the angular common model Arctic module on Forms module as a number of pages in and up grows , even if you want. Technically right in the code that generates, it's still your responsibility to not let you work so patently violate the D. R Y principle. But this is especially applicable when features are being shared across multiple pages, components and widgets. Perhaps you require the forms module on route A module everywhere needy so you can use the roots. A Link on Engy model attributes Well, you could import these modules in every much unnecessary, but you can also write something called a core module. Core modules might also be called shared modules, but I prefer the term core because it refers to essentials, whereas shared might only be across several components. Say I quote Core is something that is fundamental to the applications operation. If you up isn't lazy loaded, this isn't as important because the app Lockley isn't very complex. Core pipes, directives, widgets and other features could just be declared in the main at module, though even then, separating things may still offer performance benefits, and it will also make things more modular, flexible and therefore readable. But where lazy loading isn't used, the APP module isn't the place for global features. It won't work. Hence, you have two options repeatedly declaring importing and exporting modules and classes or doing early once in something like a court martial. This core module can be declared in every page. Yes, you still have to declare something in every page. But unquestionably one repeated import is better than two or three or 10 orm. Or if you have several custom pipes, directives, header and footer, critical services and so on. Your project might not be these complex yet, but one day he could bay so here in an AK or directory. We have a core module fall named Cord up Module, Don t s. Then we have an empty module with initialize, the rays for declarations, import exports and providers. Let's first generate a random page called Something Altar Unique, like some page in the module on the standard modules included with every generated page for just er, nick and call modules, it's probably worth creating a core module it would look something like this. We had the modules to the imports and then, importantly to the exports. If not, Alito exports, anything imported will only be available to pages or components declared by this very much anyway. Back in some page, we cannot replace the Arctic module on call module with the core module, and it will work exactly lot before. But why do we only for these two? The Forms module is used widely throughout this application. Again, we do exactly the same thing now the forms mantra features. Most importantly, the energy model attributes is available to this page. The more likely scenario is something like this in this application is a custom header. Multiple types of tool tips are point for formatting strings and many buttons that use the root of module. So very simply, we can make them all available globally. Locks up four components. Widgets, pipes and directives. We add them to declarations instead of imports, just start reward in a single pages module. The second step is to import the core module in every page, where the features a required. I've already done that here and that it now if you bring in a new library or write a universal feature. We need only import and export it here, then it becomes available everywhere in the application. 17. Structure — 2) Global Header: following on from the previous video on the usefulness of a called module, wherein we discussed the Don't repeat yourself principle. We're not going to get rid off the repeated on headers and its many Children in every page it's employed, which is all of them. And then we're going to make the head of module seen in that video. First, we generate ahead a component in the article directory, then create a module called Headed Up Module that ts We should cut our way to a basic engine module with snippets at the Arctic module rename the module, then made this module the host off the head of component by declaring on exporting it. Use of a core module doesn't remove the need to declare Bass module's like our nick on common module in modules or features that are imported and exported by the core module itself. For that, we would need something like a cork or module, but that's another video on probably an unnecessary It's a mistake you'll make a least once if you're new to angular. Mistakes, of course, are not only unavoidable but helpful and necessary. Just remember to not repeat them in the new head a component HTML, we write it on head, are identical to one would find in an ordinary onek page. Use of onyx backbone is not covered here because currently it's still it's not very good. The best place is the documentation, but a simple implementation looks all this. We had the Botton in apparent arm buttons element that he forehead for a fact tribute east set to the root pages path which in this case is the home page. Then we have a non title and another on buttons element this time with this lot of end on containing an iron bottom element for the conditional bat one, we have a Boolean in the T s file which we can make an attribute of this head of component by binding it to the input decorator. At this point, we have a working independent header component ready to be put to use anywhere in the app. There are two paces weaken putting The first is in the app component html, therefore making it all sorts of overlay over everything else. But that would defeat the point of creating ahead of module. It is also functionally problematic and not pleasing to the eye without some hacker style CSS over. We can put the main at menu in the APP component. HTML. Again, this could be an independent module and in fact, should be. If you're dealing with several tops of menus, for instance, you might have two or three different types of users each. You require a different menu. You might also let users create their own menus or something similar marked the juicy be hamburger menu. Anyway, for now, we can write the menu in the up component hatched him out. The menu, born in the new custom header, will still pick it up. Then just look in the core module video. We add the head of module to the imports and exports. The last steps are effortless. We add the head element everywhere we wanted, using the selector set in the components decorator, And then we put a value for the backboard and property. If you want to show or hide the back border and there's a result 18. Data — 1) Firestore Data Manipulation: we can reduce the new users and store data. Next, we need a way to get data from the database and present it in the You are in this video. We're going to make an ultra basic card like this while spacing the techniques used to present data like this will work for 90% of the data you're going to work with on the Web. Let's get to it starboard, generating a new page called Account in the Hasty Mile at the head of elements and a basic on a grid at a heading on the norm button with the settings all calm, you want someone to add some global starting for the hatch. One tag for better presentation. Then we crack down on the road and making conditional on the prisons of data. We unwrap the data using the aging pope and assign it to a variable, appropriately named data. The first year of the column will be the use his name with a heading element. The next will be a form. There are two types of forms in angular, reactive and template. Reactive forms give you fine grained control of the U X. They are better for complex forms on where validation and arm observation is critical for simple forms. Template forms suffice. Here we're going to use a template form. Give the form element a template variable reference with the hashtag prefix. Let's call it profile form. We make it a template formed by setting the variable to N G form. The N G submit method, along with many others, is now available on this form element. He was said Engy submit to a submit method and passed a form data by calling profile form that value. This event fires when the former submitted, The reason we're using a form will become clear. As we constructed, we want to make data editing a breeze. Hence the form will be read only unless the user hits the edit button. My first field is an iron item with conditional line styling. If it is true, we had lines actually want known. Then we have the label and import elements. Cornea count Toby is an immutable property, so we make it read. Only then we interpret the data and use the native angular total case point to capitalize value. Our next field is the user name or handle to start with the silent form. We do so make a little different in order to get the app prefix, but notice the on import elements. It has a name and a conditional read only property on energy model Attributes Setting Engy model to dated a handle will set the value of this import to the handle property of the data object we set read only the truth only when entities faults. Because we have two types of users. Let's create a different card for each krayer conditional span elements that displays only when the account or peas enterprise said the Engine model group attribute to company at a company name. Field just saw the handle field above to present the family date. Something more complicated is required. If you remember our song a form, we dismantle the date and saved only the day, month and year. So when Eddie isn't true, we despite the date in hard coded fashion when it it is true, we display that aren't daytime element, we listen for the on change oven for reasons that will get to in a moment. Finally, we have the contact field for standard users do pretty much the same thing. A conditional spun element with an engine model Group Attributes, which wraps his form data in the object property named Whatever this value is general accords with our user data structure, which has a relevant account data inside of general property. Back to the card we have field first name surname on mobile. Finally, we create a conditional result element. If the user maxim edits, we can confirm or cancel on display success or error message in the TS For inject the user service created data observable fed board the document observable of the Users Service and match the necessary data. Next, Make and edit result and company founded a change property now making interface for the incoming form data because they won't always be there, said the general on company properties to optional now for the submit method, make it a sink and cast the incoming data to the interface. Working directly on function argument variables is frowned upon by some purists. To me, it's only bad when it's confusing. Cloning or referencing when unnecessary, just make things ugly. But here it is necessary crony and commune data, using the spread syntax and set it to a constant called changes. You saw the try block. We checked. Whether the company founded date is true, which, if you remember, we set with the island change event. If true, we do the same thing as in the sonnet form extract the day, months and year. Finally, the database Roy on the Y is updated. Errors will be locked to the console on a custom air I displayed to the user. Now for the CSS, we have stars for the handle labels, and Sainz won. Next. Let's create a dynamic menu creating array of menu objects in the APP component. Yes, give a path label on all calm. Then, in the haste tomorrow, we'll probably array past the path to the ruling the Arkan name to a non organ elements and so on. So there's our menu. I can't brings us to the account page. I'm pressing the settings button, and I was editing Troy changes from data on he didn't save. There's the error message, which you want to my bread or bold most on the gallants. You should be more careful than me. You won't see this era. The concert is given a four story invalid data era. Normally This is because you're passing an unaccepted data type on defined map, observable or something counts in our case is because we made a typo on the company founded field. Now, if we reload, draw again, we say all things working nicely. The data was saved and on the home page shows the new data. And of course, this will be reflected in the firebase console if you check it. 19. Data — 2) Local Storage for Better UX: the practice of storing data on the local device has for a long time being standard in with development because native applications are installed on the device. More and more, this is becoming less the case, with new methodologies like service side rendering, progressive Web applications, stateless APS and so on. The benefits of local storage are increasing, becoming less about performance and more about personalization. You're probably familiar with websites that still somehow know who you are, even when you're locked out. Amazon was amongst the first to do this. Now most companies do it. Facebook display even your notification camp performance, personalization or security. There are still many benefits to taken advantage of local storage. Where possible. Achieving these with angular rock is very easy. There's a few libraries on offer. The best one is local forage. Our next local storage module is essentially a wrapper around this library because it's not always needed. Arctic storage must be installed as an additional package on NPM install at Arctic storage on added to the at Montreuil by including in the import with a four recall. Local storage is used the same way. The Arctic controller, on the root out all custom services used here. We're injecting every the constructor of the user service. Then, in the primary logic of the service where the user's data is pulled from fire store on initial application load, we set some local data by calling the set method. The first argument is a key under which the data will be stored. Then we passed the data. For now, let's pass the account or name and handle. It's good practice when creating new common data structures to create that correspond the interface, which you do here in the user models file. The most obvious place to use local data is the log in page. Inject local storage in the constructor at a local property, data cast to the interface and make the NGO on innit method. I sink. Be careful when injecting onyx storage, using AutoCAD play and intelligence. Often the wrong storage module is imported. Make sure it's the one from ironic in N. Jeon in it called local source that gets passing the key used in user service and said the result to the local data property. We also want to make sure the user can clearly state or if they wish created the lead local data method. We can clear the entire local store reduce while this application or just the data onto the my outlook. Okay, then set the local data property to no. Finally, let's use this data in the U I in the hasty mile crack active, conditional on the existence of a truth the local data property. Then create a custom message for the user along with the delete method. Here we're displaying different messages for ages, the type, the handle. And then I was uninspired not you bottom at some stars to the message handled in butter and compile the app. Now, if we log in, then log out refresh. We get our elements and custom message. Of course I'm not Jack Black, so let's do either and hey, presto, I'm once again anonymous. When you do this with absolute Twitter and Facebook, they will most likely still know who you are. Actually, in revolves underwear store on your device to factory settings and clearing your cache phones and preferably using a VPN or accessing very different I p address. There is no longer such thing as true anonymity on the Web 20. Data — 3) Profile Picture: to display images in our application or rather, profile pictures we're going to use for a base cloud storage. If you followed the getting started section of this course, you already have far based storage initialized, if not from far based in its storage, create clouds Story service again. You can use angina snippets or manually talk it out. No, we're also nesting Gate under the Services Directory, which is simply for our unclarity. This will be a core service, so we press provided en route to the decorator Tobler than Eddie Falls before setting them . We're going to use the NGX in which Cropper Library by marry 137 There's a few libraries that serve this purpose. One, even with same name I've tried most of them on non are is easy or reliable as this one. There's a lot of flexibility available using the many properties or just aspect ratio, apple type resource dimensions and the like. Your story with NPM install injects Image Cropper, once it's installed, include the image Proper module in the module. We want to use it now me the home page mantra, creating your own column and add the image proper element the first attributes, we're going to bind his image cropped event to his namesake property, all the properties listed on documentation. We looked at what added his attributes here next to said the image quality to 100. We also want to maintain the aspect ratio and listen to the image cropped event Mark the properties. There are several events available on these elements. Next, we had a save button that displays only when the Cropper is loaded to enable or close. We need the classic haste him our import element. But it's D forties on and limited customize ability is excuse younger French shite. So we're going to do something a little different. Give the import a temporary reference of import, said the talk to foil, except to P and G and J Pic Falls installed to display non and listen to the change of them . Calling a yet created image or bloated method, the entire input element is now not displayed in yuan. Importantly, though it still exists. This will not work with something like NGF, which removes elements all together now We needed I'm Button, which, when clicked, follows the upload mechanism of the native input file We could do this by grabbing the import with its temporary variable and calling the quick method thistle far of the classic false. Like the window of the device, we need a place to the spire uploaded on editing image credit. Deal with an image contain a class. The first child is an image element conditional on the nonexistence of a cropped image on the existence of an already set profile picture in observable form, which you unwrap with the casing pipe and set to a variable named pick. Set the source to this variable using interpolation. You could also try conditional binding here, but for some reason that doesn't perform so well in my experience. Then we add another conditional image element, this time appearing only when the cropped imaged up base 64 property is truth. The question might use. Here is Angeles Elvis operator. It's essentially compression syntax that tells angle it. The first check that the property cropped image exists. Checking for the property of a non existent property will throw an era. Next. Let's add some CSS. We have styling for the image container Dave to make it centered on the nice eyes, then on the image. We cut the corners with the board radius almost Adam vertical margin to the road. Now we get this pretty wise and brains in the home page. Yes, at a profile pic observable to the data object said the corresponding inject the source controller and create image. Following that is an asynchronous image of loaded event. The first thing we check is whether the images over five megabytes, of course, you can not do the circle changing toe wherever you want. If it's too large, we present air a toast with instructions, as we said, the image cropped event to the past Event object, which is passed through the change event of the native import element. In addition to over sauce, followers also need to handle the errors with data connection device Cebu corrupted Fars or otherwise. For that we Macon a sing load image fouled method and present toast when it fires next, reading the method for when the images cropped. This is called by the image crop, the element itself, and it passes the cropped image in addition to some of the data. If you set the output, talk to both, it will contain the image in two forms by a 64 string on the block. Far the output type is set to both by default, which is probably what you want when working with fire Base, for which uploading blood falls is much easier than base 64 images. But we still need the block falls to present it to the user in the U. R. Hence we want both output types. We can assign the image crop property to the past argument. Finally, we need to submit method to set the image, make it a sink and start with the try catch statement in the troll black. We await the update profile pic method on the user's service. Then on success, said the image cropped event to know which will remove the image cropped element from the dump you catch simply log errors to the console for now in the cloud storage service credit . Earlier Injecting unit for storage. The code required here is very simple. Create an open method that takes a path on blood foil, then return the result of Korean upload on Angela for storage. We also need the ability to pull images from the storage database, create an image method passing the given path and then get download. You are out mark with firestorm storage returns observable, so we should fix him with the name with the dollar, sign the clarity almost there in the user service, inject the cloud storage service and create a profile pic property. This will be an observable of the image contend U R L to be uses the image elements source value. If you weren't sure about this Alex dress code, check out the core section on our X chairs and data streaming specifically the video demonstrating the map operator. We're getting this intelligence warning because the property doesn't yet exist on the interface. So let's change that before finally adding the update profile pic method. Again, it's asynchronous, and he takes the image far as a blob. First, we'll build a path to the location in the class of data race in which we want our fault to be uploaded, are highly recommend, use the same path structure as you do with Firestorm. It makes things much simpler, reduces the chance of stupid errors and just make sense. We want the or PLO method of the class every service before dating that uses far so data record with the path to the image. Now far up the app Margene and go to the home page he took blowed. I found the most beautiful picture you can. As you can see, we have this crop mechanism here, which could also be changed to a circle, say the image and head over to the far vice consul here. We could see the parking uses data on his storage. The image fall itself. The next step is optional, but I can't just leave the you are like this. The functionality is good, but we can make the presentation better. It's time, but making things more horizontal in the host Umar at the Allianz Self Center attribute to the first column of the road contain the in which proper? By the way, if you using the latest version of our like you want instead have to add these attributes as an arm along self centered class or simply set the storm annually in the S E SS file. Next, said the Saudis MD attribute to six. This will reduce the column to sort six on medium screens upwards, not the first image element in an NGO container conditional on the crop damage property being full. C. Then we upend the NGF expression of the image element with semi colon Ellis Place order. Now, if the conditions to display the image our own met an N G template with the reference variable R Place order will be displayed. Create that template below and said the image to anything you like here. I'm using a blank avatar image from the Web. Add the user's name above the upload button on data closing on coal tag below the classy import element. We're going to spread the upload flow into two columns, one for the image on one for the Cropper in the first column, one of the Emperor Element and a div conditional on loading being set to True Inside that we use the arm spinner element finally met the second column conditional on image proper event and removed the condition from the same bottom at some positional CSS to the spinner . And then in the ts, we said, and unsaid the lonely elements where necessary and present a toast on a PLO success. Let's look at the difference still work to be done, but much better, calling this profile picture feature is hard Cody to the home page later will make it into an independent module, making it probable into any page or component throughout the application. In addition to the several, customization is, you can apply to the future we've created here. There are tons of other things you can do both in the front end on back. For example, in the front end, you could let users test filters or blood short clips or use simple Jeffs. The back end is the place for longer CPU intensive stuff. Extra authentication checks from now generation smart cropping analyses for obscenities uses something like the AP, ours for body by Google and simply even updating uses document with the path to the bloody foil. If it wasn't clear before, this is just an introduction. 21. Up-The-Ante — 1) Profile Picture 2: the profile picture feature we implemented in the last video or somewhere early on in the course. If you're watching the videos non sequentially involved a decent amount of code, it wasn't too much, and he's pretty good for what we achieved. But now we have two problems. The home pages clubbed it with all this code dedicated to the profile picture, because essentially, it's hard coded and therefore we can't use this feature elsewhere in the up market, other pages or pop over components without duplicating it. We can talk both these problems by accepting the feature into its own module, where it can then be imported as necessary. Let's begin by creating a shared directory again. You construction the tree however you want. It makes no difference when the application runs. Some people prefer to separate you. I stole from the applications for the mental infrastructure, or there's like to bundle features together, such as including the services model was components. We do its pages and so on. All on the one feature directory and some people are two separate by file type. So have one service directory, one page directory, one widget directory and so forth. I like to keep things as separate as possible without impinges on development speed on good readability, which is something you can work out only through lots of trial and error. And it's a course dependent. Our mutual agreement if you work in a team anyway inside shared Crowd Components directory , then using on XLR to generate a profile pic components in that directory. But we're running our Nick Judy component with the path on with the name There's our components now create. I want your foil named profile picked up module TS using snippets or otherwise, you want to start with the basic engine model like this, then import local module we create earlier in the course. Next import the profile pic components and added to the exports. Finally at the image proper module on green and the new module to profile pic module. Next in two or three steps, copy out all the profile pic feature code from the home page T s fall and place it in the oven. Places of the new components. Yes, for the mission import, you could just use intelligence to import them one by one or copy the same it over, then do the same for the relevant hasty male and styles. To make this feature available to the home page, we simply import it's module in the home page module and profile pic module to the imports and remove the Image Cropper module. We'll use our feature just like any other hate in my element with the tag, which in our case is specified in the profile pic ts as a selective value in the component decorator here. I'm simply cornet profile pic, then added to the home page touch Tomorrow in the relevant place. Now let's try it out. A current difficulty. Our Inter with these tutorials is knowing when to include errors. Too many causes Eddie out all the mistakes resulting in students being bewildered when they see that it actually doesn't work the first time you do it. This development, it's the constant, often frustrating but mostly eventually rewarding process off trial and error. It's the right test encounter era fix era test loop the keys to go as fast as you possibly can through this cycle. I'm not know he is a common angular error. The console is telling us that the profile big observable can't be found It's referring to the property we created earlier in the user service. The fix in this case is to change the value from dated up profile pic to use it up profile pic and to make tarts crude happy. We change the affected service from private to public. Now you can see our profile picture feature working. Exactly Lucky did. Before the Cropper works, the position is the same. The or pro succeeds only now this feature is not clogging off the home page code and can also be implemented anywhere we want. 22. Up-The-Ante — 2) Account Card 2: soon after the last video. We're not going to write the home page you can't guard independent. Only this storm is not going to have it. A module effectively nuclear in a widget. The main benefit is you'll see it's simpler, easier to D book code as well as a more intuitive architectural starting. Go ahead and generate an account card component under the Home Page directory. We're going to use almost identical kowtow what's commonly used in the home page. HTML. For now, just copy of the on card content and paste it is shown. Instead of creating two separate cards, we could just give one card, some conditional child elements here. I'm adding a special arm badge for enterprise users. Then we have some stalls with the parent container on card, budge and so on. Feel free to change these to something better in the T s changed a hasty mile to account card at a data property with the import decorator. This tells Aniela to expect the data variable to be passed. Its components with simple would use like this, which only have one set of dated to deal with, is generally a good idea to call this property data, we'll make the appearance of this entire widget conditional on the existence off the satar using NGF. Doing this doesn't just prevent city Tomin errors, but also improves performance. If you wanted to spacing issues on the front end with this approach, supplement or replace it with the conditional class that changes the A pass ity or visibility of the element in the home protest. Tomorrow we cannot remove all the account card code and replace it with a simple account guard element. Again, the name of this tank is the value of the selective property in the Tears follows decorator Now to pass our data. The data property of the widget is now effectively an attribute off these elements We apply and said it a value just like any other haste in my attribute for its value, Maxim changes to the observable like nesting the new data in a pertinently maimed account card data object. Then we simply bind it using square brackets. The final thing to do is to make it available to the home page. Would you do about declaring the component in the home pages module like cells? Let's take a look at what we got. It seems I forgot to add the on car tag. Let's fix that. And there it is. Finally, let's Adam any bottle to take the user to the edit page. There are two ways we could do this. The first is a simple bottom on the card, with the ruethling property linking to an account any page. The second is by listening to events on the word reform from within the home page for this basic use case. The latter is no doubt overkill, but it does demonstrate event binding, which in angular is an important concept. So that's what we'll use. We start by adding an edit button on the widget, which on click calls a method named Edit clicked. The top is a good place and give it a class or I D. So you can add some styling, then create a new event every two instance on the widget, which would decorate with the output decorator. This decorator is critical as informs the home page to listen for an event named Edit Clicked Event. Create the adequate method and make it called limit on the event. Instance, you'll be familiar with event Barney syntax to listen to the event on the wiggy, we simply wrap the name off the event in parentheses, as you would with Click will focus and so on. On Father, it will call the Account Card Click method, which will not create in the home page. Yes, inject the router and create a method that never gets used to the A camp age. When called Now when we hit the edit button were taken to the account page, The backbone works. We have navigation information. Everything works as we'd expect. 23. Up-The-Ante — 3) Data Presentation: We've already touched upon data presentation so far in this course. Now we're going to look at something more complicated while presenting dates, using pops into at the template to transformed data on the fly and tricks for compressing Jupiter code into one or two lines. Generate a lot Cos Page, and he saw the day F in its library. Deafness is a JavaScript library dedicated the manipulation of dates and historically notorious problem in all code language is the FNS is a brilliant lottery and in my opinion exceeds moment. Jazz on other day libraries in several important aspects, including arguably the most pivotal want size data. Vaness, especially the new version. Number two is exceptionally lean and could save you hours or, if you, anything about May days in the large companies page above the class declaration. Creating a list of mark company objects contain the name on various arbitrary properties like STUCK pros, category, headquarters, location and so on. Also added a lot property and using the sub days method from the FNS City to a date in the past, create a company's property in the class to get the temporary access to the mark data in the hasty Maher Kurt of Basic on a Grid On the First column, we're using Energy 42 on wrap our array of companies. This directive will create a Colum just like this one. For every company NT four directors, by default, are made for a race. However, we know that each company is an object in all the tour unravel each company object in an equally in fashion. We used the key value pipe, which makes each company property available, using a ducky on dot value notation. It's anyone's guess to what they referred to before we fire off. Ensure the newly generated pages in the correct place in the operating module. Normally, when you generate a pages in the CLR in our nick, it will replace the bottom of the route list, including below any wall card route, which will, of course, make it inaccessible because the angular routine matches roots but working its way down the list. Finally, at a Boston to the page in the at menu, we could add this to the TS array, but because we wanted only to show to none enterprise users, it's simply that this hard coded in the hasty Mao Now, when we log in, there's the bottle and there's our page. Nice, but there's obvious problems our use of energy for men that were able to use the object. Here's the label, but correctly the label is displaying in lower case our first look. Angular points we used in title case by which capitalizes values or strings. Popes are implemented using a separate lock, sir. So at the point, I'm recompose and there's our capitalize keys, but now it isn't on the problem. The keys have no spaces between them. This is fine for simple keys like company, but problematic. You are Rose when the cares more than one word. This just looks are nicely developing, and it is so exercise for the day is building some pipe work. The trenches looked like a utilize directory with a method that ts far and oppose directory . With the Decameron dot ts farm, a pipe is essentially a function. It takes a value, transforms it and returns it. We call it a point because some additional decoration is necessary to tell angular how to use it. You methods that ts graft function that transformed a classic camel catering into title case that is extremely spaces between capitalize words. Next, in decanted at TS Import pipe on DPA transform inside Apart decorator set name to Decameron . They re create a class that implements pop transform. It has one method transformed, which takes a string on returns, the result of our camera, the title method. Of course, it isn't necessary to separate out things like this. We could just write the come with the title function inside the pipe itself, thereby removing the need of a methods that yes form if you're going to lie a lot of paperwork over. It's a good idea, especially part where for which ongoing maintenance is a requirement. But the main benefit is being able to use the methods throughout the application, not just in pipes. It's written into the pipes themselves. Important them until other ts falls for using, say, on our X chair stream wouldn't be so easy Now, wherever we want this point, we declare in the module. In our case, it's everywhere, so we declare it and export it in the core module. Finally, change the topic, a spot to the new DeCamp appoint that's also made the keys bold. Give them some breathing space and far up the up and, as you can see, properly presented beautiful, capitalize keys also. But wouldn't you know it? There's as ever, another problem. These Thomas dates, bucking the method that ts create a method, takes a date and returns it as a readable string. The easiest way is using former from deafness. The character is used in this Day of Venice. Foreign method are specially for it in the documentation. This is annoying at first, but it simplifies things drastically in the long run. Just make sure you're viewing the documentation version corresponding to the stool data Venice version. At this point, we could create an of the pipe where possible. It's always better to transform data as early as possible. We use the D camera by burly after transform the value as soon as we have access to read. The date, On the other hand, are part of our mark Cos. Data, so we can simply transform the day to there important new method and wrap it around the date you locked Amazon and there's a comparison which better let's finish brought in the former method to all the relevant places in the up such as the account card here, the day to his communion at a later time. In a lot of setting, it would likely be in a synchronous AP I call A pipe is perfect for this, but we can emulate appoint program in the middle, my method in the relevant yes, for simply wrapping the hasty Mauer interrelation expression in a call off that method angle and then transforms the data on the floor in precisely the same way it would with a custom point. 24. Up-The-Ante — 4) Reset Password: in this video, we're going to integrate firebase password reset. There's a few ways you can do this. Most companies said. I simply emailing to the user. Long gone are the days where you have to contact support to give you your password. But in special cases, the methods of those days might be precisely what you require, in which case back in integration. Using a far base admit sdk is a good solution. Most use cases recalls something as simple as user entering their email and receiving a link, which is what we're going to do here. Create a function called send Password Reset Emaar, which takes an email as an argument if you follow it along. So far, the place to create these is in the or service thing called Send password. Reset any amount on the angle. For instance, passing the given email. This tells far basis in an email to the user who was attached to this email. If no users found firebase will throw an error next in the log in page. Yes, we inject the are Nikola on loaded controllers. Then we create an icing forgot pastor method. Make it a sink and create Angela instance. I like to call present before building yella because it's easy to forget to Addie before one in the code. Give me a lot of header and array of imports or rather, a single import, namely the uses email. Be sure to give it a name because that's how what access to data the brilliant aren't documentation is the place to find out what can be customized. Then we have an array of bottoms. The first is a council bottom. Any bottom of these roles, it to council will tell lying to close the alert when it's pressed. The second button is our submit method. Set the handler property to a nascent function that takes one argument data He saw that function we create a basic on unloading instance on presented brought a try catch statement in the try block. We await the completion of the or service of recep function and presented success alert. If in error occurs anywhere inside the try block Jarvis Skip Holtz further execution and jumps immediately to the catch block. Hence the success alert here is one executed. If the proceeding or service function complete without any era, far based errors contained two important properties. As far as the wise concern, a code and a message, the messages tend to be cold. So in our catch block, we're going to use deconstruction to receive only the code, which we'd emerald coast the messages for using an if else or switch statement. Error handling is covered in more detail. Later on. In the course, we present our customary message in the form off another alone with two bottoms, one that cancels the password reset feed you don another that records ovary function is included in, well, ably back, because that's exactly how is experienced by the user. Finally, we had a forgot possible in the relevant place on the page and give you some typical CSS. Now let's see how it looks. He forgot password. Of course, you could make these appear only when the use of fouls logging. To make this work, you're going to need an account using an email you have access to so baba test dot com or havoc at the zoo dot com or meet me at 10 dot com won't work. He send and check your in box. They're Zima, which, as you'd expect, is pretty dry but it performs the intended role. The link will open in another tab in which he used a can enter a new password which worked right away. If you want to do something more elaborate, secure or just different from what we're done here than the way to go is the firebase Adminis decay, which, of course, can't be wrong. Client side choir functions are the easiest method, even if you're not using for basic authentication. 25. Up-The-Ante — 5) Tooltips Simple: as of October 2019. Tool tips are surprisingly still, not a native Arctic feature that have bean and no doubt still are tilting libraries. That worked well with our nick, such as Arctic tall tips, but they aren't always maintained while and some not at all. For example, I think tortillas was incompatible for a while with our nick form, which is simply unacceptable if your life something more reliable, is needed. The common solution is to use angular material toward tips, which in this video we're going to use in a simple sign, a form their simple, easy to implement started in the way that everybody will recognize our reliable on. They perform well because their simple but also because angle of is maintained by an awesome team. The code is optimally maintained. The simplicity and ease of integration has pros and cons the contents which will soon become clear. We start by installing and animations, CD carry material and also hammock chairs. Then add browse animations module to the at module. How much s records? Slightly different implementation toe what you'll be familiar with. We added to the APP in maine dot es with a simple import all statement like So next we import the angular material stalls to the global CSS file. Here I'm using the indigo pink scene, which is the angular material default. But there are various others, and you can even create your own when using any material, which is pretty big. You can love it, only the features that you need by important module by module. In this case, we're importing the Mat Torti module in our sign of page model. The next part is a walk in the park. We add the nine button to the ah night. Only this live end set, field to clear and included on. I come with the name said to Information Circle, while Canadians could be found on Nikon's dot com. Now on the bottom, we seem be adamant, talked about Tribune and said it in the text that we want to display. Let's take a look when we hover of the bottom. We get this classically start lt with our text. Now let's dress it up a little. Back in the hasty mom made the color of the on button conditional bought, rapid getting in square brackets. If the password field as invalid value the kombi red Elsie will be black, the star little to be so we use the dot marked halted class here are making it black with white text using our excesses variables. Now we have a better style on when we talking invalid value. Your con turns red noise, but let's go one step further. The icon is a clickable bottom, which makes little sense given that the tall T is triggered by hover Event. One of the cons of material tall teaches that the trick. It can't be directly changed to something like a button quickly a simple attributes for silly reasons that you can read about elsewhere. The tool tip is hard coded to display on a hover event as art and problems overs. There's a couple of different things that we can do here personally, or what distorted to display on a button Click on disappeared when I click elsewhere. Achieving this requires only a few more lines of JavaScript in haste, him out first at an angular, temporary reference variable to the iron bottom and set it to Matal to then we take over the default actions of the Have I by listening for the mass enter, and most leave events, both on which we call event that stop immediate propagation. And now the tall tube does exactly as I want, but that's pretty much it. As faras, angular material tool tips are concerned, there are many other work around or hack a lot. Customization is you can do to manipulate little teeth, but he just means MAWR. And more and more code changing the color style, size trigger and so on are not easy feat with Anya Little tubes and including images, icons and any other media form, demands such a level of perseverance that one might as well create their own library. These limitations are intentional. The constraints are imposed already bought Google, the company behind most of the angular platform, but most importantly, the writer of the Design Co. Two, which angular material was complied? In other words, material tool tips are a great choice. If you like the design and have little interesting something more interactive, animated and personalized for something more advanced you could use on in pop of us. But this isn't really what they're intended for, and if they are, the controller is poorly designed for you would have to constantly create instances of pop overs, you would have to include many more entry components that were increasing load times and listen to events. It's just not so simple. And that's just a few problems. In the next video, we'll look. It's something far better. 26. Up-The-Ante — 5) Tooltips Advanced: moving up a grade from regular tool tips is not quite a picnic. But like all picnics, the result tends to be good. And with a little bit of extra effort, it could be great. Pop it out. Jazz is a widely used library, including by some major companies the demos on Papa Jazz. But all are just to sneak peek into the cab abilities. It is the way to go if you want poppers as flexible as components themselves. So let's dig in. Papa dot Js is written in Vanilla JavaScript To make it angular friendly, we're going to use the NGX Papa rapper. The way to think about rappers is the way software speaks the hardware, your laptop desktop applications starting in you and so on. Those airways for you, the user to interact with the underlying infrastructure of the computer, namely the process er ram more the board and so on forced the NGX. Papa Rapper allows us to speak to and may use off the Papa Jazz Library. Install a rapper as well. Is it Papa Jazz Library? We're going to add tall tips to design a page so import the NGX Papa module in its module. If you follow the last video, either delete the material told it cold. So you're left with the original password field or just it to what you see here. We have an ironic Botton within infer Circle Icon. Then we're going to give it some attributes. The primary one is Papa, which tell us papa chairs to get to work. We pass it a variable, which in a moment we're going to make into a component. I'm calling it pass right in front, Then we have a self other attributes or other public jazz properties here would sit in the trigger to, ah, hover event, preventing the popover overflowing its parent elements. Give the popular a class on the arrow class. You can already see the flexibility we have here, and there's much more you can do which confined information on interrupters documentation. So now for the password info component, a starting point is a papa content element to which we saw any. The password info, temporary, referenced, variable, everything it saw. This element will be displayed as Art Alti here on putting restrictions for the password value in bullet form. Finally, we had the styles because this is an overlay element. The place to put your CSS is at the global level, either in the app global very was. That s CSS said these ed index of the pop over to 100. Or if that's insufficient Ah, high number and add any other stars you want. I don't want the arrow, so I'm making it invisible now for the, uh And there's our papa. Of course, because it is a component, you can put images, videos, animation, icons, buttons and even told components inside this Papa compared to regular tool tips, this is Ah, hole or the level anymore opinion. It's always worth the extra effort. 27. Basics — Framework Architecture: many development courses start off with descriptions of the framework code, language tools or the software in question, for example of four before breakdown of the tree of a typical angular or handicap. This is a backwards approach to learning pretty much anything spending time trying to understand or memorize what decent that doors without being interested in it is a waste of time and energy. It becomes interesting when it needs to bay, such as when you want to apply some additional configuration or a dealing with problems specific to one or more rarely touched files. The best approach is digesting time approach. For basic projects, you need to know little to nothing about some of these falls and only the necessities For others. What matters in the beginning is gaining momentum, which happens not both theory, but practice when you start with any new framework or language or tool, beginning with the simple project in mind. For instance, to do or note up or basic website is very helpful, allows you to focus on the fundamentals by filtering, got what isn't important or yet important to the progress of your project. When you inevitably come to the parts that yet to grasp motivation will be higher, and you'll likely have an easier time grasping the concepts hence, only watched his video. If you buy this point familiar with the framework that is you've installed, the package is rooted around, perhaps even created a basic. Otherwise, this stuff is very unlikely to sink in First of busy tears. Think, Jason, this is essentially the configuration file for top script glinting. So when you write a piece of code and you get that red squiggly line underneath it, so in a compartment ts fall. That is to do with the seconds that you have configured in this file here. You normally don't need to change anything here. One of the things I will do if he know what space is set to true. Also, that falls, that is, for when you are in entitle return. After all, in a block of code you need a bit of white space on, it'll cause a compile error or some kind of other error that is just absolutely pointless and mind boggling to me. So I always disable that, but again, you will not normally need to change anything here next to proceed tears, confident that Specter, Jason. In this course, we're not going to be covering testing pretty much at all. The reason is that you need to rely on testing to alert you off invalid code or the problems. It's very lucky that you're not paying enough attention to the code that you are writing. I find that people who long testing setups that are heavy on the projects are not really that demanding, wanting off better code, almost always. So. This course is about right, even better code. You want to learn about testing. You can visit the angular website, and it's plenty of other tutorials that couldn't help you that. But normally I will just delete every single speck fall. I've let them in in this course for the sake of consistency with what you may be viewing at home. But really, we're not going to be touching or editing any of these falls throughout the whole course, and we have the tears conflict that Jason Typescript is essentially a super set of charges group. It is a language that is unreadable by browsers and other devices, so it needs to be comport into jobs group before being served to them. How it does that is to do with how it's configured in this fall here. Normally, when you install a new article and Europe, everything here is done for you. You don't need to change anything, which is actually the case for most of the followers we're gonna be talking about in this video. Sometimes when you install new dependencies, you might have to change the target module that it's to do with compatibility problems on normally just changing this from, say, yes, 17 2002 years, 2016 and so on. Does the trick obviously going to stack overflow to the search and see what's working for other people? It is also helping to know the role of the toilets property here. Sometimes when you insult interdependency, you have to install the talks package separately. So say you do that and you go and write some code. You may form that the tops are not mapping on to the code. You're not getting any intelligence, any lutz except Trump. Normally, that is because Touch Group is not picking up on the tops file the common fixed that is including the path to the new tops package here. Tears comfy at Jason is simply an extension. Fall from the main tears conflict. Jason File. It's useful if you want to keep main or default settings for many customize settings, as the name suggests, the tears conflict app. Jason is the Tops group configuration for specifically for the application or is the main four applies to the application on the workspace, the factors that Jason is a file to help you maintain your NPM packages or dependencies. So you have first name here op version on other useful properties. He goes off script section, which is very helpful for productivity on For which will find a video in the bonus section of this course. Then you have dependencies so normally in packaged up. Jason, you have a set of dependencies on deaf dependencies. Death dependencies are could use are required only in development. That is, they are libraries that make a human's job easier, so they are testing dependencies on top script. Dependencies are libraries that are included in the production bundle. For Europe, there are core libraries, so you have things like the angular court on core Rx chairs and other essential libraries to the functioning of your are the package lock that Jason is version control for your abs dependencies. There are really two important roles this fall. Performs. The first is when you're up. Depends on a specific version of a dependency or many dependencies. So, for example, you won't mpm up. Damn. And you looked at all of the ups dependencies. And then you go to serve the app either in production or development, and you find that you went into an era Quick check on stock over folks shows you that the era is to do we delayed his push of a specific dependency. The proposed solution is to roll it back. So satisfy base, for example. You're back to version seven. Then the answer on Stack is to roll back to version 6.5 point three. For example, you do that, um, alarm. Europe works what you must do. Set that version in package like that, Jason and package that tracer, which would ensure the app doesn't want to get up that package. I'm running to incompatibility problems. The second important role this fall performs is to do with get. You want to make sure that packaged up that Jason is included in commits to remote repositories for two reasons. First, it will help me keep track of the state of your project at different stages. Second, if you're working with the developers or at some point, you need to roll back your project to a specific stage, such as because of an error or a pivot, the package like that J someone is sure the corrected versions of each dependency are installed. Com A Com Pts Hosts the same for how you're built. Talks to the browser during development. The fever you get in the coat editor terminal under a lot of development server is influenced by this file. Really, would a altering need to be done here? And if you are being interesting time principle, you need only worry about this when you have a problem specific to comma or had the browser interaction here up doing hot reload, for example, Arlette Conflict Jason is the home to additional configuration. That you can apply to. Arctic Arctic is quite flexible in this regard. The exact properties usable here are specified in the ever brilliant Arctic documentation. The browser lists file. Make sure that your build files, namely the CSS and test files are compatible with problematic browsers. Like all versions of Internet Explorer and Firefox and other less common browsers like a lower on opera. Daniel J. Son is where the angular sores gets made. Here we have specified such things as which APs use and, yes, you can have more than one up in a workspace. Also had the CIA live processes, build and serve commands. What files and assets to include in the build Starting Falls and other custom scripts. Larkin Levels Budget warnings. The code name and version of the APP on rappers for the CLI In this case, the Art Excel. There's a ton of customization that you can do here, documentation for which you can find a angular dot. We will be doing a little work here in the course, namely when we get to push notifications. But for the most part, you won't really need to do anything. Care. Get ignore specifies which files and directories to admit from commits to remote repositories. There is always a list of defaults on. No modules are automatically admitted by gift. It's critical to include hear any files that contain sensitive information, such as a PR keys and secrets. If you accidentally push such information to get, you will only receive a warning. You don't get host lot. Get home or big, book it and so on. Or from the provider of the sensitive information, or Google or fire base or both. But once it's out there, it's out there, meaning you should consider it compromised. That will require key regeneration and possibly a few hours of fixing or more, which is always painful. But do it frankly, was spot on when he said that an ounce of prevention is worth a pound of cure, the zone flag stuck. TS far addresses a problem caused by angular change detection warning in situations where it's unfit or not needed. Test stop Jessie's much like the spec files for testing purposes only, and not concerned in this course, Polly feels that TS is home to specifications that increase the universality of the application. Given the range of device use, applications, environments and situations in which the application can be wrong, it's common sense that one size will not fatal. These sayings work to ensure optimal functionality across as many contexts as possible. Man dot ts includes code that bootstraps the application, which basically means when the application is loaded into a browser environment, you'll see here a check for whether the court environment is production or not. If it is, production mode is unable. Development mode, angular runs, extra challenge detection mechanisms as well as many other checks to make sure things are as good as they can be before the APP is built in production mode. All of this is disabled, which results in great performance improvements. You're impatient, not may unlock speedy hot reloads. You can comment at this block here and use prod mode. You're in development. Things will move a lot faster and provided you careful with your code, you shouldn't really be an issue. Just be sure to dip back into definitely occasionally to ensure you're not missing anything . And by the way, there was always something. The ever familiar index HTML file is the altar temporary home page of angular application. Every website in the world has an index edged him out or some version of it. It's where all the big browsers look first for files in this currencies where your application is loaded, that happened within the body type here coolly with our nick. This is the apurate attack. The name doesn't matter when it refers to dots. Uproot is a component that contains the whole lap. The global that CSS for is a cesspool she that applies to the entire application. SAS could be the focus off an entire course. It CSS on steroids detects regular CSS payments but has a multitude of capabilities that make everything deeply intuitive, less repetitive and far more readable. In this course, you see a lot of nested statements as well as use of the ampersand on mixing. There's some wicked content out there on Sands, for which you'll find some links in the resource section. Off this video on the scene we have very bolster S CSS. This is another place in which you consent global starting. She's in CSS or SAS style CSS statements, but its first, the place We'll just see us as variables provided by Ike. CSC's variables are a feature of Sascha and every to create custom properties to be used to say my length with position or background color. Properties are used in everyday CSS because many of these, the most commonly just have been the color variables on almost every year I components in Arctic. There was an option to change the color. Attribute. The base colors. Heil accuses are named primary, secondary tertiary warning and so on, and they could be changed here. But you could also create your own and use them in the same way. The Environments directory contains a production and development environment. Yes, for this is the place for global used fixed very walls, such as a PR, G's document paths and other settings. Unsurprisingly, the Prat fall is used in production. Everything from the death fall is supposedly copied over to the prat fall when you run a bill command. But I find that this is not always the case to avoid problems unless you require. Otherwise, it's best to make these Fars exactly the same During development. Assets are media files used by the application images, sounds, videos and so on. The Assets Directory is the place to put logo and splash images, notification sounds, gifts and so on. So it's not wise to make these two large any individual fall or the entire directory videos . Hefty, immediate and longer audio files like music and podcasts are much better stored on a database such as cloud storage, where they can be delivered into the APP as needed. So just set up. Result in a much smaller bundle size, resulting in faster loading and download times on do when used properly. Better performance overall. THEA at Module TS fall is the room module of the application. Every application has at least one module, namely this one bigger, lazy loaded them. But he developed applications have many modules, a concept known as modularity. Much of our special for is the requirement of a particular feature, such as the components, Popes, directives and services necessary for that feature to function properly. If the feature is a cake, the module is the recipe. The module, therefore specially for, is the core requirements of the APP infrastructure, like the router on our nick module. Certain libraries that you install may also require declaration in this phone. In this cause, the angular Far library plays a critical role on will also be using components that are presented as the top player in the dark. These will need to be declared here. The component es fall contains the logic for the app component hedge, TMR for which is the home of the APA route. Tack from the index html fall we were talking about earlier. The stock area The iron route outlived is the beginning of Europe. It's essentially a wrapper around the entire act that allows our only to perform its animations, lifecycle hooks and other magic. This is also where a global head of my go on it's the best place for menus. Every component in angular has the same structure. A component Yes, fall. I hated him out for andan s CSS file. Additionally, a module far may be used if the component is employed in more than one place in the APP. The component TS is basically a classic jazz class. But with this decorator here which tells the angular compiler to really locker component typically attack stole sheet and hasty more for our special forward. Though these all county theory be wrote in this fall alone something known as in line code , you could think of this as the brain of the component where all the logic is housed. Behaved him on CSS Falls are how that logic is presented. It's easy to confuse the app s CSS fall for the global That s s s fall The APP s CSS far only opposed to the app component html form as specified here. This can't be changed as can most things in Angula but it's simply too keeping separate a concept known a separation of concerns which in common parlance, is used interchangeably with the concept off modularity. Finally, we have the ability model file. This is the common and best place to declare every route used throughout the APP our nick pages generated via the seal. I will automatically be added here, though if you have a wild card or catchall unknown statement that points back to a dedicated page, you'll need to really the things Every time you generate a page The strokes. You can feel intimidating at first, but it is in fact, very simple when you understand it. Basically you have a set of roots which are loaded into the router module along with any additional configurations. Here, each route is an object. The only necessity is a path property which tells the Anglo router what to do when this path, namely the string value of the property, is access to either via the address bar or but a clique within the APP. Most of the time, the next property will be load Children, which points to the module of the page to be lazily loaded in when these parties accessed. If lazy loading is not used, this will instead be a component property, which points of the component fall to be loaded. When these parties accessed. Alternatively, multiple components or modules can be used, their Children or low Children arrive. Each item in one of these race is another route with another path on either low Children, property or component property pointed to a module or array, and so on. The Nestea capabilities and intelligence of the angular route is one of angular, most powerful features. We'll be dipping into this quite often for at the course. So with, like all other theory, don't worry. If you don't understand, things will make far more sense. Don't you start playing 28. Data — CLI & Routing: this video is about the Onyx Eli and the most common command you'll be using, provided you have followed the first section of this course, you will have the Arctic seal I already installed on the no version you are using. If, however, you change your no aversion since you likely have to restore the island Global package using NPM install Arctic flag Jay was starting. I feel with the V s code workspace containing two directories, one called Arctic Angular course. Another called notes. Open a terminal in the first Andranik start. We're going to generate a basic application on which to start building the iron axial. I will run through some questions, which is which name and timbre to use. You can also include all these in the Arctic. Start command using flax, give the upper name and choose a blank template. If you're new to our nick, it's a good idea to try out each of these different templates that improve your understanding of chorionic concepts on because they are official templates composed by the on a team that can be used in production immediately. Hence they move. It's a voice to provide the foundation for your next project. Once you select a template, installation of the ABS dependencies will commence. How long this will take depends on the horse power of your computer, on which no version you are using. Average time is about two minutes. Once everything's done, we get the structure of files and directories in our workspace putting, which, identical to an angular with some additional conflict files, are. Nick is a pleasure to work with from one of the function of each of these falls. See the video Total Framework Architecture. Now I'm going to make the common terminal mistake. We're in the command from the wrong directory. Arnie doesn't automatically serious into the APP directory once it's installed, so we see the interweave. Then run iron Exert, which will fire a polite tournament server with hot reload. Essentially computer acts as the server on which your ABDEL website will be hosted in the real world. Hot reload refers to the way code automatically re composing Arosa once you hit saving the code editor, meaning you see your changes instantly. Article open your default browser typically on port 8 100 but this can be over written using the ironing convict four or flats on the Ionic serve command. Or you could just change your default browser in this course, abusing chrome. Predominantly right, click on the page and go to inspect. This opens the chrome developer tools, but you'll be spending a lot of time mostly in the elements and console taps in the console . We can already see some warnings. These are telling us that some native Arctic package is designed to be room when the APP is local. Install cannot run. This makes sense because we're running it as a Web application. These are, for some reason, part of the basic Arctic bundle. Normally, I just delete the packages and move their course from the apple together and add them back in later, if necessary. Now back in, the editor, run on it generates or jeeva short page dashboard, this career page called Dashboard and include a new path to that in the angular router. Next to create two more pages. My profile online more to see how it navigation too, paid his works create a method in the home page ts called Go to, which takes a string as its own. The argument. Then inject the angle router in the constructor. It's important if you using telephones to make sure that the angular router imported is not some or the local package with same name. It has to be the angular one. Often you make me some steak. If you do a lot of development on your machine, in the method we call Navigate Bar, you are out on the router. Instance he takes a string or path or route to which to navigate in angular. There are two types of roots, relative and absolute. You learn more about their is you need but unhelpful ways to think about it would be going to your local shop. Say you need is everyone does some sea cucumber. You go to your local supermarket and they don't have CQ commerce. You tell you someone so is down the road might indeed sell sea cucumbers. So you say thanks and you go on your way. The problem is, you don't know how to get there from where you are, but is you don't know the directions relative to your current location. You only know how to get there from your home, which from your current location would be the absolute route there would be absolute directions. Seeing was go all the way home and then start making your way in search for some sea cucumbers. Of course, from the location of your home, the place that you're they're headed becomes the relative route because now you know how to get there from where you are. So if you're of a stock, your MBA ham, which you like the taste off sea cucumbers, the never gay boy your arm. But that works only with absolute roots, which is one was prefixed every path with a forward slash This forward slash refers to the law almost, or parents all main routes in the sea cucumber world. It is your home. The roots also has the never gate method, which supports both relative and absolute roots. It takes an array which, put together builds the URL, or path to the page you want to navigate. If you want to hear about that difference Germany, it's better to use relative paths they're more likely to recall with the hosting browsers back and forward buttons there faster on may produce better animation, especially when working with Arnie. But in the initial stages of development, where your main focus should be getting something like to work with. You may not have time to work out really roots, and furthermore, they're very likely to change. So early on. It's a good idea to use only absolute roots in the house. Gmail on the ball and the boys are go to method on click passing the shrink dashboard as an argument. This'll route to our dashboard page for chicken, which told Module corresponds to the dashboard path a specified in the out routine model ts Far before we fire up the cold, let's look at two more ways. Buttons coming return. You know, First, we define the go to method with angular, we can apply the ruethling attribute to bottoms and other elements, like passing the path to which we want to navigate. The rustling actually is commonly used unconditional elements or where the code is done. I mean, sir, we someone of the engine for directive hence has come to see something like this with the actual it was passed as an array, with the first item being a relative or absolute point on the second item being the path name. This could also be a variable when we return this cold, we get our three buttons, which do exactly as we'd expect. There is also one more critical attribute to use when working with Arctic, which is the root of direction. This informs our Nick what kind of navigation is being made, which he wants to know. For animation purposes, routed direction could be set to forward, backward or route, and the unequal produced a slightly different animation. Forage again. It's not something to worry about early on. Next, we're going to look at components, which you'll know all about if you have an angular background. In fact, Arctic pages are just classic angular components with their A module, this creature up clean and fast boy, never in the use of lazy loading models, also allowed pages or components to be shirts throughout the application or even multiple applications. You might, for example, have some sort of authentication pop over a pop over, as the name suggests is different from a page. We are going to be rooting to a pop over with generating, presenting it where necessary. Hence we need a component and not a page. We can also generate services and pipes using the Ionic CLI, though personally, these are features I would prefer to write manually. Another useful command is our Nick Info, which outputs a ton of information about the current environment such as the Koran, Onek angular mode and MP inversions away from our Nic MPM are dated. We'll let you know which of your abs dependencies are. You're not dame here. We could see that the Arctic angular and four based packages have an update ready, which you can install by running MPM updates. You can also update global packages or repeating this command will with flag. Jay will conclude with one more look at ironic serve the Arctic Sea allies for the most part of wrapper around the angular CLI whose brain is in the angle. Asieh, Leider, Jason Fall When you run Ionic serve nd surveys one under the hood. What Engy served doors is defined here. Hence, it's where you would apply configuration to the CLI on how he composed the application code . For example, you can define which assets, if any, you want to include. That's what it's post and custom scripts. Logging into verity settings boarded warnings on more 29. Data — Guards: guards are centerpiece through the angular platform. Very likely they will be routes that you wish to block unauthorized users from being able to access. Even if you have no role based pages per se, you might have an admin panel. Well, perhaps there are suspicious or ban uses you want to disable access for Let's build a God first, create three pages using the cli My profile. Learn more. And if I Q. Next in the truly module, we create a wall car route at the end of the route, least setting the path toward the asterisk will match any possible route. The angular router peruses is for this list of roots in order, which is what we've put this part at the end. If a user, for example, tries to visit the root slash Scientology angler will find no proceeding matches and therefore four through to the catchall double asterisk or wild card route for the up with on exert to make sure the pages of working they are. So next create a guard's directory and inside it a fall named Orthe Guardia's. If you have the unionist, if its extension falling stools just top God and choose the count. Activate guard else told what you see here, rename the guard to off guard and in the decorator said, Provided in to Root, which tells and get out that this fall is central to the Alps functioning they can activate . Mother is given the arguments route and state, which contain information about the current route. What's important, however, is a return value of the can activate method. If it returns, true navigation will be allowed if force navigation will be blocked. If you return force, it's important to specify a redirect. Also, user will be given the eternal screen of death. The white one. Applying gassed route is easier setting them as the value of the can activate property in the laboratory module file can activate can take any number of guards, which is what we pass a guard as an array. Let's apply the guard and then see it in action. If we navigate to the home page, we know that the guard is fired because it got these objects briefly skim over each of them to get an idea of what data you have access to within the guard itself, not to make the God do some real world garden back in the editor can or service fall inside of Services Directorate again, you snippets or manually talk to service out name it or service and so provided into route . Let me get the service to construct and any we say. If true, the start is like then equals True Declared is locked in property off taught Boudia back in the guard. We can inject your service in a constructor. Then in the collective a method we could say if they use it is locked in. We turn true. L slogan error. Navigate to the learn More page on return. False making me can activate Might that I sink allows us to use the away syntax instead of raw in. This isn't ugly. Venable Now on the code and the address bar a penny. You are a with slash home were immediately read out, ready to the learn more page in the console. We can see there a statement regarding the redirect. As of angular seven, there was a cleaner way to writing. Instead of calling navigate and then returning forms, we can simply return past, you are out and then passed the path to which another game. As you can see, it is exactly the same thing. Finding this. Look at how God could be reused currently, the app Peru is far. If you wanted to guard each of these routes, we need to set the can activate property on each of them. Alternatively, we can nest all routes, recording authentication under a path lock so and said the can activate property on the parent path only. Be sure to keep the Walcott I saw out of the nest rooted as always to the bottom before you run, the Kurbi warned. This won't work if you can't gets while traveling, the code would be prepared to force quit your crash browser here on getting repeated air statements and the browser has crashed were running to our old friend. The Loop, Angular is trying to read our at May the on a phone to get the user to the learn more page . The problem is that the loan more page is being guarded by the same logic. The solution is to put the learn more route outside of the nest, and nothing's worked just fine. 30. Data — Forms pt1: There are two tops of forms in Angela template and reactive forms with temporary forms. Most of the work is done when, surprisingly, in the template, their grave for relatively unsophisticated forms like arbitrary use information, meditative road video and so on. They're not so are suited for cases where fine grained control is paramount to Josina logging or sign a form where you want to do live checks for user names, security checks and passwords, diner hints and so on. We're going to look. A template forms in this video. Here, I've got a fairly rudimentary application, a few pages particular born authentication guard on the log in page. The log in pages will be creating a form to go ahead and create one using Easy. The CLI or your fingers will copy and paste if you call in the report in the luggage very attached to him. While we have the usual head and content elements, Krayer form tuck and give it a template reference variable called something truly creative , like other no form, then set the variable to N G form. This is a property made a valuable ally, including the Forms module in the pages, macho pages generated using the iron axial are typically have the for much and included. Next we have a nine item, are unable and on input Children. The import is a crucial part here. We set the name, attribute and attach the N G Model directive form or Angie model. Check out the engine model video. Do the same for password only these times that the types of our password is hidden. Next we have a submit butter, which we set as the primary forms of mid born by setting the top according on the forms had itself. We can tell Jarvis Group what to do when the former submitted. But listen to the anti Soviet method on submit. Let's call yet if I method called submit or something far more creative and passed formed up value which will pass all the form data in object form. Also, make sure the submit method is within the form tag or it won't work, then re create the Soviet method in the ts and still be console. Log the argument. Now we write our really email address and most commonly used password, password and hit log in. We get the result, as expected, in the console Nice. Another way we can deal with some of the events on a rightfully increasingly common way is by using deconstruction in this submit method parameters. Because the incoming form data is an object, the function pulls the email and possible properties from the object. You don't get the intelligence here, but for a simple cases detailed talks group intelligence He's probably overkill Anyone. Finally, let's look at something we take for granted at such a level that we forgot to include it in our was and form when we enter. After filling the field only happens probably on every form you're filling the Web. This has resulted in the form being submitted. You might surprise you, but even that has to be programmed. Thankfully, it's pretty simple. With Angela on the form, we listen to the Chiappe event of the enter key. When he fires, we call our submit method. Now, if we tried again and he enter, the form submits as usual, Evidence ball, the console statement 31. Data — Forms pt2: reactive forms give us fine grand control over the forms behavior on therefore the uses experience, since most of the hasty mail is the same. In Part two, we're just going to transform the template for from part one into a reactive form. Firstly, we get rid of the N G form reference and then the engine model directors from each failed. Then, on the form we bind the foreign group directive to lock informed property. What about to create in their luck in ts inject the form builder in the constructor? It's a common recommendation to set properties above the constructor because it's common to see these properties then set inside the constructor. This, to me, makes no sense on. The ultimate result is more code where it's unnecessary. If I'm right in a property and sitting in later, say it's a dynamic property almost be set later on for some reason, then all right above the constructor, if he could be said, run time and it doesn't depend on an ejecting instance in the constructor, also writing about the instructor and vice versa. So this locking form is better placed beneath the constructor because it depends on the form builder were sitting to form builder that group to which we passed the field of our form. There's a couple of ways the former can be used. The most common simplest is like this. We set each field to an array, with the first out of being the initial value of the field. Subsequent items in the array commute validators, another optional configurations for the field. We'll get to those validators later. Next, replace of forms module import in the page to reactive forms module. Finally, we changes. Submit triggers in the hedge demon to this stone passes log informed that value. Now we're on the form performs exactly like it did before. Only this time it's a reactive form. So now let's my use of it, which a validation buck in the form at the raid. Second item. This will be an array of validators, which we import from Angula on both fields. We add validators that record, which will keep the forming an invalid. Stay until the field is filled. For emails, we use validators that email, which uses of Reddick's expression onto the hood to determine whether the entered value is an email. Next, we define Some classic jazz getters thes give us quick access to the form patrol instance, and therefore its validity and value and so on. We return the result of calling. Get on the phone with the name of the field we want now in the hasty My we can add some conditional error elements for consistency. Let's use our no terms that display only if email, which refers to the result of our aim. Our get er done invalid and email that value both evaluate to true, not chicken. The value was a common misstep and result in error messages being displayed as soon as the user scrolls. It makes no sense that he spent a diner every message. If no value is present. Unless the error message is non standard in this guy's, the boring field is invalid message. Anyway, it's jump into the browser and see what we got When we enter any letter in the mail field, the error messages immediately displayed in addition to the ripple color of the item being turn red bionic. The first obvious problem is a starting the second. More annoying one is the speed at which the era is indicated. I don't even have time to check my instagram feed waas entering. This is clearly a problem back in the cold, this first at some CSS to the error message class. It's a good idea to make this a global class if there's multiple places in Europe where error messages might be displayed, the circle thing we can do is use the D bands property of the input element, which would delay all firing events on, therefore the time it takes for Angela to analyze import for the specified amount of many seconds. One second is normally too much, but let's go with that now recomposed the code and tested out. The experience is now much better from a deaf M user experience. Mac includes our intro to angular forms as you've witnessed reactive forms of the way to go . If control is the goal, another common thing to do is disable or even remove the submit mother until the form is valid. It's also good practice to do with double check in the summit method is south. If the date of ice core is an expensive one or the data want submitted is immutable, but you can see much more of this rather coarse. And of course, the true learning commences when you have your own form problems to solve 32. Data — Ionic: Grid, UI Components, Animations: the only greedy is arguably one of the most useful of its many fantastic. You are components. It's used all throughout my course. It's a grand entry point to the ironing framework, and there was a creation of flexible, responsive, functional amazing interfaces. It solves the age old still in on a problem off centering elements of the box. He has many useful features while re ordering and stocking standard break points, and so on. The break points. That is how the grid matches to the vice screen size could be adjusted, asking the party in. And of course you could stylized the child rows and columns. We're going to create an F A Q page for which the iron greed is perfect. On the page, we have the usual on header on our own content. First, we create the grid with a fixed attributes on one row with questions Class. My first role will have a default size of 12 with size. Value refers to what proportion of the parent row this column should take up. 12 would be 12 twelves, or 16 will be 6 12 will half the size of three with three toffs or 1/4 and so on. Setting soils MD 26 will make this column scowl down toe. Half it saw its on larger screens upwards. This column will be our first set of questions, so we have a heading of overview and then each question wrapped in a span element on the sperm. We listen to the clip method on Click we call the yet created scroll to method passing a string that identifies the question. Then we have three more groups of questions in columns of identical structure. In the copy. These all right your own the next role contain a single color with the answers were given. Get the iron. Just divide content. Start class one of many globally available classes provided bionic thes classes were formally usable as attributes on the element, which seemed easier with the latest on the release, will give you a deprecation warning about the new method, the first column or Appleby the answers to the overview questions. We have a header on this time a parent Deve with the answer block class. Then there's a smaller heading with the question and importantly on idea set to the same string we passed to the school to method of the corresponding question above. We're gonna kind of I d to use here. There really is no technical right way. The right strategy is to pick a method and stick with it here on creating ideas to match the question. Up to five words in Camel Case If the question is longer than five words, tough but five should be enough in an F a Q to make each idee unique on the news. We have a paragraph element with the answer. Now we just repeat the same for every question. Now for that school to method in the TS use, anglers view child to grab the on content element, which gives us access to some useful methods. Mark Scroll to Point will identify the iron content element with the altar. Unique reference content. The school to method will tell the I d strength we using document out Get element Baradei to find the element in the dark on which we call Get banding client wrecked to get the X and work ordinance. If you want. You can also set some stars on the element, which you may want to time for a better user experience. that we call scroll to point on the arm content elements passing the X and more position on the duration of the scroll, finding me at some CSS before firing up the code and never get into the F A Q page. So there it is. If we jump into the chrome tours and choose a different device, that group response, as we specified earlier, picking on a question gives us. He starts fall down the page, the question perfectly positioned. That's the working concept. Now let's talk with the dolls and see what happens when we remove the fixed attributes. We get this full with Paige scenario, which obviously isn't appealing on large screens. I recommend you play around with the calm sources under plans in different Arctic classes and so on just to see what is possible with the grid. Of course, all of you know that breaking things of fixing them is the best way to learn or is MZ would say, just move fast and break things, but that's just politically incorrect 33. Data — NgModel: the engine. Mono attributes or directive is something we see over and over in angular Andranik applications. But what does he do exactly? I'm while they got them brackets, we can demonstrates pilots very easily. Here we have a basic temporary for off a logging flow. We've got an email password field built with our nick. You are components on each import we have attached the engine, all directed within angular template form, which is for me is because you set the form to an energy form. Engy model essentially transforms this regular input field into a form control instance which gives us observational powers instant access to its value, the ability to disable. And we set it on more. In other words, it makes this import apart the form without he would still see this field in the you are. But we get nothing from me under the hood using simple logic, which, of course, we should be striving for the one other requirement with engine model is that the import has a name, which would be how we access its value validity, stay and such like you also see any model with square brackets and set to a value thesis Standard. Conditional binding. It's usually used to set an initial or the full value of an import or input by settlement. More commonly is this unusual syntax. Using square and classic brackets. This has been known as banana in the box Intacs. You'll see it described as to where data binding, which makes little sense until you try out for yourself. Krayer password property in the TS while and said the banana to that property. Then create span or P what iron note element and interpret the password property, then for the code. As we talked the password, we get the password displayed live in the You are obviously this wannabe where you want me the password. But it does show what two way data Bonnie is. The passing of property is abated on the fly, as opposed to buy some function triggered by the form Submit. My third or such like engine model doesn't have to be used within a form. It can be used on many elements on most input based elements. All of the ionic you are components that can have a value can also be used with Engy model 34. Data — Lifecycles: there's much more to a component. Yes, for than the constructor on energy on it, you may have heard of life cycles or lifecycle hooks. The basic description is that every component, and therefore every page, has a life walk with humans. There's a birth under death, and in between, last stuff happens. The birth death handed between all represent events or hooks to a drunken allocate. Some logic a paid his birth, for instance, is usually comprised of the constructor end Janette on de Njie on Changes functions. It's death in John Destroy as well, as if using are like a couple of other events that you may not have heard off like on view will leave on Diane View did leave, and there's a boat load off in between. The whole story is utterly compelling, which arm words overtone are possibilities for US developers and therefore user experience . We're going to look at every event now. Most importantly, the order in which they fire on how many times this could be one of the most important videos in the course on def it is aren't completely responsible for it being so buried deep in the seemingly trivial stack of tutorials. That said, When it comes to the user experience, that is the uses, interaction with your applications interface, everything matters. In addition to the many lost circle hooks provided by angular, our Nick also give us several events to play around with. The main reason for ironing providing these events is related to animation. For example, on it will fire the arm view did enter once the page or components view has completely entered the view that is the before Onek animations have completed. In addition to any of the checks and balances. The on view did enter more far immediately after the NGO on Annette event. But it may be a couple of 1000 milliseconds later, which can sometimes make a huge difference. So I recommend you follow this video about copying everything shown on alternate things for fun. Forney's After all, the fastest way to learn. We start with the basic empty homepage underneath the constructor at the NGO on Chinese method. If you have angular slippers, is thought you could also told the first few words of the method and selected from the pop over. Then we had a Kancil ex tainment saw them off so we know when it fires the NGO on changes event is unique, and then it gives us some data. You think opponent as Data Inbound properties, which has one decorated with the import decorator. The simple changes data will be a before and after snapshot of the relevant data. This could be very helpful with things like Form, population. Let's also look the data. It's good practice to let talks group know about annual loss or cause you're employing using the implement statement. But it is not, as most would think, necessary, Angela for Aziz event. If it finds them defined in your component class, regardless of whether you declare them with the implements expression, this is because Todd's group doesn't exist. Runtime browsers off JavaScript falls, Which yes, means that every time you serve your app in the bride's about running self and every time you hit, save all of your target code is compiled into JavaScript. The aggression aside, let's also add a few more methods that standard Engy on it on nd Do check the first we know What about it? Fires once just on the initialization of the components engine do check is a little different. It enables us to write custom life psychologic only rest circumstances we ever need, and you do check and be warned if declared. It follows more times than every other hook, and it doesn't stop until the component is being destroyed, which, with our nick as you'll see later, is not always when you would expect. Next. We have NJ after continent is on energy after content checked. These are very useful events, which will tend to take advantage, of course, offer the former followers only wants. That happens as animal suggest. Once the components content has initialized. It is an checked by Angula, which results in the latter being fired. Similar were different in critical ways. There's the energy After viewing it on nd after view checked the distinction made in the angular documentation. Is it the After you hawks concerned view Children the child's components whose element tanks appear within the components template On the after concert, hawks concerned content Children patrol components that angular projected into the component. If that means nothing helpful to you, Marquis destiny, then you better off will begin to the code and testing out what we're doing here. Next we have four Hawks from our Nick. Why have you will enter for just before the animation completes on view? Did enter Fired Once animation and other initialization is completed on view, will leave Fight as a page or component is leaving the view and animation is underway. Onda on view diddly fired once animation has completed. Lastly, we have NJ on Destroy, which angry developers will be very familiar with here on crack in a bottle to an F A Q page Thistle hall a crucial difference in how are Nick and angular use components. Now who free for the up and go to the page, We get a beautiful concert off console lock statements, the order in which he wrote them in a temporary Is it all room which they're fired. But as you can see here, some like the Arctic events, fire only once on others locked, and you do check and Engy after viewing it fire several times. At least, a common error is to place logic. You want only executing once inside one of these hooks, which is not so easy to D book. If you have loose knowledge of life cycles, I'm not going to waste time going through this list. Instead, you should Peruzzi common Assam code at some alerts and other potentially troublesome code and consulates a decent understanding of what each of these does before you do, however, know that there's a couple of things missing here. We didn't bother logging anything from the constructor because technically, it's nothing to do with the life cycle of a page or components. It is part for class itself and therefore fires before everything. This is what you might see, a form created inside the constructor and then populated inside energy on it. And secondly, despite defining it nd on changes, seems to have not fired the reasons that this page has no data. Inbound properties are couture components or property decorated with the import decorator. Finally, let's test he's paid for signs of death. Clear. The council can never get away from the page using the bottom we see in the console. The two on the view leave events Well, nothing from Angie on destroy on matters because Arnie holds onto angular components for as long as it thinks that you might use them again. This is a core on the concept, know as recycling and John Destroy will eventually fire, but typically isn't instantly after its departure from the view. Hence, if you're doing security work or un subscribing to hefty subscriptions in energy on destroy and you're using our nick, you're doing it wrong. The place where such code is one of these two from Myernick. 35. Data — Services: services. Another prominent elements of the angular framework services exist to enable sharing of data properties and staying to cross pages and components. Depending on how they're settle, they could be global that is available to every page components, service, pipe method or otherwise. Or they could be available only to a single recipient, 80 a page or group of recipients. There are two ways to create services using the CLI or manually. Let's create one using the CLI by running Arctic G or generate service on I don't know that's calling something original like some service. Run it and we get the service Fall along with the service Spec for spec falls over testing , which we'll talk about later on in the course. This service is obviously in the wrong place. That's instead cracked a service inside this Services directory, which is inside the core directory. This time we do it manually. If you have angular snippets installed simply top service and select any service from the pop of the menu. But make sure to set provided into root within decorator. More on that later, we can also generate invested features using the Cielo without having to see the into the directory by pretending the name of the service in the command with the path. So we do our G service at core slash services slash some service, and there's our service foils. Okay, let's do something with it, create a few properties and give them a type. Then in the my profile page on home page or any pages, if you're going through the course in a non linear fashion, we inject the new service in any one of those pages. Console, like the injected instance. Go to that page in a browser, and then we can see our service. Which is that class just an empty heart, Or is it hard? Just an empty class? I guess it doesn't matter. What does is that we have an empty service, which doesn't make sense, given that we did add something to the service. The reason is that we haven't set the properties, meaning they don't get compiled and therefore don't exist back in the service. Let's set each property some arbitrary value. This time we see our service properties in the console, which means they're available for use. If he generated the service using the Onyx Eli, the decorator likely contains that provided in property set to root. What this does is makes the service globally available for injection. Let's see what happens if we commented out. I'm really on the code, the console logs and no injector. So if we want to use this service now, and we don't want to make it global, we need to include in the providers array off the relevant page or components. Module block so and narrowness just fine. Another thing to know about services is that if you have some global service that you want loaded at run time, even if it isn't used immediately, perhaps you have some initialization logic inside the services constructor. But the features that use the service are typically used right away with the user. Then the service should be injected in the APP components. Yes, this may seem like the wrong place, but the APP components always loads, meaning. Whatever is injected in, the constructor also loads, and if it doesn't, the application fails. An example of such a service would be a notification service. Perhaps it's used already by the notifications page, but you wanted loaded right away so that when the user ghost identifications. They don't have to wait for them to populate in the you are. Finally, services could, before this week, some template shortcuts. Oftentimes you'll find yourself writing a method in a page of component that cause a method in the injected service on nothing else. Or perhaps you set a property in a page that is itself a reference to a property in an injected service. Most of this code can be deleted on pages, and components can speak directly to the service from within. The template to demonstrate in the my profile page changed the injected instance of some service from private to public. This is necessary only to make typescript happy on its an inconsistency that your only noticed when you try to build your production bundle. Now, in the hasty amount, we can use interpolation to grow property from the service we could call asserts that Property one or even method here, let's go for the buffet and like the whole lot to pass a data, we can use the Jason Point, and now we can see the pro four page shows every property on value in Jason format. Nice. So that's angular services 36. Data — Models: If you are new to talk, script or haven't worked previously with the strong or static Netapp language lock C or Java, this whole model business small be attacked. Confusing interest group. Most of the time you'll be working with interfaces and types. Sometimes in combination with no spaces are modules. The most importing to know is that none of this exists at wrong time. Toys Group is essentially a developer tool. It constantly observes code as you're writing it in the editor, providing insight, hints, snippets and letting you know by errors and then a compile time. That is the ts falls of me good part in D. J s jobs Get falls to be sent to the broza Task it those one final de check of the code the corner checks that would be too heavy to do on the fly to demonstrate you have injected some service here, which is a bunch of running properties. We can access these values like so as long as it really is set to a value or caster will talk for interface correctly. Property for is given a snow snippet because Property four is an empty object. Okay, now saying the service. We had some essential data, which again we could access from anywhere this services injected in the real world. This would typically be crab from the local storage or database, meaning if we were to hard code the data like this, it would be eventually over returned. What the true values but the properties would still be created. So we will be creating there or, if a clarity's sake, when developing doing this once or twice. He's already enough for May. But what if, said data is used several times throughout the at? This is where top good interfaces and talks come into play about the service class creating to face named essential data on writing arbitrary object that, like you, would normally except with the values set to the data type, not the value itself. If we're unsure what property data top is going to bay, one option is to do something about this. We have an undefined que, and the value of any now talk script will allow undefined properties to be accessed or alley to data cast to this interface. You do want to be careful doing this too much over because it defeats the whole point of tight code, which is what typescript allows us to write, setting the values to the values actually going to be a wrong time or when life is also possible. This is something known as literal types are mainly concerned. Strings will get to die in a moment, but the bulk of your models will be not only throw anyway. With this interface, we can scribble by the hard coded values of the summer Central Data Property and instead cast it to the interface. It works just slot before, but now the up is Lena, because the properties of being created just in time this summer central data property would simply not exist until it's set by some of the function that performs an AP or call to the database or checks a local storage. What we've created here is an environment akin to one in which your typical social study is conducted. Namely, it's artificial. Unless you're practically someone not the Arctic blank started template. We're likely going to need to access such a central data in many places, right? The application. We can make this interface in portable bip repenting with export. Now we can cast any property to the interface and get the same intelligence. For example, if we created data property on the page, custom or interface on the constructor, we tried to set the value to anything that doesn't match the structure of the interface. We get an era. A common use for type is literal. Strings underneath the interface create a type called Our Little String and City to accept multiple variations of the some string strength. Next set, Property three are the interface to the new type. If we attempt to set these properties that anything that doesn't match the type, we get an error Once again, this is a kind of era that wouldn't be picked up Badrul javascript until the browser serving the falls runs into the problem. This is what types grouped is taking over. Now that we know interfaces and types, let's look at how they're typically used. It's common to see a dedicated models directory with separate model files. This makes for straightforward changes to date destruction on from one angle our boys by the separation of concerns principle for simple applications, it's definitely overkill There. The interfaces and types and so on could be defined within the same directory as the feature using them or even on the main feature fall itself. Local service. You can also just create on one of CS for which is what we're going to do here. Copy, pasting interface over is what is the types? Create another essential data and device and make the more exportable. Now we're going to create a combined interface. The simplest way to do this is with the type and simply using the ampersand. A combined toppy some monkey right require when you have multiple user structures, say have a standard user and then enterprise user, each of whom have slightly different data structures. When the differences slight a combined type, it just fine tested out by declaring a constant and casting it to the combined type. If you put on I Jason, Huh, right. The key as a stream was that with quote, we get at least two snippets here corresponding to the properties of the combined type. But you're wondering why can't use the or sign here, Given that we're never going to use both data structures a run time, Let's try it. It seems that typing quotes first doesn't invoke the same Popova windows before, which tends to be very useful. But you're up grows in complexity. Target is also companion that the property is incomplete on that. If we know that set of properties minor exist, that is, there are optional. We can make every property oven interface optional by wrapping it in a partial function, provided you're not using an arcade version. This is a native typescript function prior to have been included retards group Developers of Rights that your function themselves or if the optional state with default, they would manually make every property and interface optional by pre fixing it with a question mark. So that concludes the very briefest off demonstrations off types, interfaces and types. As always, proper understanding will come from applying these concepts in your own projects. The concept shown here are also used greatly throughout this course. 37. Data — Data Presentation: a sign. The hedge html element an I D on door. More double classes for styling. They neither a class or stars so that it can be identified and grab by the script to using methods from the document model Lot query, selector on Get Element, Baradei and so on. Where, then the content will be money well injected in, repeat for every single element. Thankfully, those days are pretty much over. What's there are still mountains of progress to be made in the Webbys on space. I mean, there are just so many striking the only websites out there. We're still better off than we were 10 years ago. And if that's debatable that their tools and instructions have gotten ridiculously better and far more accessible, he's certainly not what we need more off his creativity and imagination. Two things which by definition, have no rule book. Hey, cons. The angular platform supplemented bionic makes fine grain control over the dam and you x not a doddle, but the normal Istook soup, the predominant objective in Web design, has to be more than just functional presentation of data. It has to be beautiful, clean, intuitive. Apple. No, these If you're an android user. Try spending 2 to 3 weeks with an iPhone and then going back to your android. He talked to go back. The alluring path of least resistance is a mighty influence. The black sickle bill, like many species of animal, not excluding ourselves when their mates approval with displays of beauty perfection by showcasing exceptional attention to detail into tennis is a game changer. But it's not an easy feat. The story of Apple Computers is a fascinating one, even without mentioning jobs his name, however hard that may be, the point is that building You, I that is aesthetically pleasing on Dorner, only functional, that is viscerally engaging on masterfully efficient that is simple but uses complexity that speaks to the heart on the head. Is something all the big corpse? No, it's important. Masses and masses of resource is our poured into producing something akin to such a picture off perfection. And yet so many of them filed. There is also the problem off homogeneity. Perhaps our greatest hope is making the process of design as easy and effortless as possible. Yes, perhaps the design space itself needs an upgrade. The conversation is one aspect skills are another. It's the latter that we're going to look at here. Just how easy is it to get some data from mind or database to the screen with angular Andranik? The soup is definitely Doc. Let's take a look at some of the most common techniques here in the TS for of a bear booms my profile page. Create a property under signing a stream, making the string appear through the host. Email is as easy as double curly brackets. This is known as interpellation. Many values, but particularly strings Len while to on the fly formatting using Popes on what wrapping properties here in function calls, for instance, we can capitalize each word of a string. What? Attaching the 90 angular total case by Okay, but rarely is it as easy as this. Many of your strings, like most data, will be coming from a database of some sort, typically in the form often observable or promise. Let's change the shrinking to an observable using behavi