See me demonstrate the course content and best practices while building a productivity app with Angular, Ionic, and Capacitor and get your Angular questions answered.
In this session (27/03/21), we will build upon the basic app from last time and use the Nx Monorepo architecture.
In future sessions we will:
– Hook the app up to Firebase with GraphQL.
– Extracting to styled UI components and publishing to App Store.
We are building on the productivity application that we started in the previous session, where we were creating the application with the NX workspace and the monorepo structure from Narwhal.
In this session we are:
- Going to build up the data and get the data using a facade pattern.
- Create some tasks; these will be daily/weekly/monthly/yearly tasks with some CRUD functionality to Add, Edit, and Delete tasks.
- Navigation between monthly/yearly tasks.
- Answer your questions along the way.
Creating the data-access facade
In this section we are going to build up the data and facade and the create a delete task function.
We want to be able to delete a task from the daily list of tasks first, we need to wire up the event in the HTML markup (delete)="onDelete(task)".
Now we can call the event in the daily.component.ts file.
Once we have the events wired up we can now create the app.facade.service.ts file, for now we will just hard code the data in this facade and we’ll move this to Firebase in a later session.
Calling the deleteTask(taskToDelete: Task) now deletes the selected task from our component, when we move the data to Firebase the deletion will persist.
Navigation between daily, weekly, and monthly
Each section daily, weekly, monthly, yearly has a <app-header> component, this header component has an input property called [backUrl] we pass into the property the URL of the next component we want to move to in order, for example daily will navigate to weekly and from weekly to monthly and so on. In the header. To Navigate to these different URL’s we use Ionic’s NavController injecting this into the header.component.ts and wiring up the onNavigateBack() event and calling the navControllers navigateForward method passing in the URL.
Question and Answer Session
Q. How to deal with increasing growing components with tens of inputs and outputs?
A. If you have many inputs/outputs, the first thing to do is to group them into groups of seven, this seems to be a manageable group for most people. If you find that you have more then you might want to consider creating an object, finding cohesion between the inputs/outputs, and group them into one thing. Alternatively, you might want to split this into smaller components or use content projection ngContent.
Q. How to deal with components calling facades or functionality from other modules?
A. You can call from facade to facade, you can also inject the facade into the component.
That’s all for this week, we go into more detail in the attached video so please do check it out.
If you would like the source code for this module head over to my Github page here.
