Angular Core

Angular Core Generate UI Components


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Generate UI Components" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas generates core data, ui-login, and ui-toolbar libraries in the application.

Get Unlimited Access Now

Transcript from the "Generate UI Components" Lesson

>> Speaker 1: One thing that I generally will do is if my application has any kind of data that's coming from a server, and rarely does it not. I think that pretty much every non-trivial application has some server side concern, is I generate a core data library. And so this is where kind of all my data is consumed.

[00:00:21] And I may put my state management in there as well. So, ng g lib and core-data. Let me just do this -d just to see what's going to happen. So far, so good. All right, let me just pull the d off.
>> Speaker 1: And we already did the material.

[00:00:47] So far everything that we've done, material has been kind of a utility kind of a barrel module. Core data is going to be strictly I would say business logic, server-side communication, but you can also put, UI things in a lib. So for instance, let's say you have a common header, a common footer that needs to be shared across multiple applications.

[00:01:11] This is very, very handy as well, so we'll go ng g lib and we're going to call this one ui-login. So, this is where we'll put our login screen, that you can now share across local applications, and we're going to, again use that p for prefix, and ui.

[00:01:33] So, in an app, it's app in a lib, it could be ui, or whatever you wanna call it. So, you know, if you work for a company you may wanna have kind of a condensed prefix. So, whatever you wanna put here. I'm going with ui.
>> Speaker 1: And then we'll do just one more here.

[00:02:00] I'm calling this the toolbar p =ui. So we generated some libs. Let me just pull up the file exports so that we can see. Zoom this out. So in our libs we have core-data, so this is where we'll put our services. We have material, which we've talked about, and then we have ui-login, which is going to hold the login screen.

[00:02:31] And ui-toolbar, which is going to be kind of that top header, that we'll eventually build out.