Q&A Angular with Ionic Coding session

Share on facebook
Share on google
Share on twitter
Share on linkedin

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.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

Build a Course Platform with SPARTAN Stack

Build a Course Platform with the SPARTAN Stack​ Step by Step Guide giving you a full production ready setup with industry best practices. <p style=”text-align: center;”><b>Press for sound.</b><b></b></p> <h2>Here’s what’s inside…</h2> <p >Section 1</p> <h2>Designing the course portal (Figma)</h2> <p style=”text-align: left;”>We will cover the fundaments of designing a brand new site in Figma including

Read More »


Develop Real Projects With Industry Best Practices Join our community of expert developers and get the industry level best practices, step-by-step, from real projects. https://www.youtube.com/watch?v=XHOmBV4js_E Hi, I’m Christian Lüdemann I’m a web developer from Denmark and the creator of this blog. You are here to learn how to code like the best companies and learn

Read More »

Debugging Angular apps (with Sentry) and workflow

In this video, we cover the topic of debugging Angular apps and provide an overview of various tools and approaches that can be used. I highlight the use of Sentry as a tool for error logging and performance monitoring. I also cover my scientific approach to fixing hard-to-debug bugs. Do you want to become an

Read More »