How can I implement an Onboarding / Walkthrough page in Angular Material Design?

Can anyone tell me how to create an Onboarding/Walkthrough in Angular Material Design (Electron)?

I'm still new to the whole world of Angular. Basically I need to have a desktop app that looks like the image below. Displays a bunch of images, and allows the user to navigate between pages by clicking the arrow icons.

---

I was unable to find any example or tutorials on where to begin.

Would anyone be able to get me started?

Thanks.

Just so you know, your question is the equivalent of asking how to build a simple two-stroke engine. There aren't all that many pieces that go into it (and luckily we don't have to machine them ourselves), but there are quite a few things you'll need to learn if you want to learn how to design the pieces and put them together. Hence (I assume) the downvote someone else left - you'd probably find more a more useful response with more specific questions, that show what research you've done, what you've tried, and what hasn't worked, and why you think it should have worked.

There are lots of tutorials on various aspects of angular, find-able via a simple Google search, but I assume you're looking for a tutorial on exactly what you want to do; when it comes to front-end programming (and really all non-trivial programming) everyone's needs are going to be slightly different, so it's quite rare to find a tutorial that explains the exact program what you want to make, especially for enterprise products. I'd advise picking a introduction tutorial and going through it (The main Angular one wouldn't be bad) - you won't need all of it for your current project, but it will let you learn the basics of angular, and from there, how to go about learning to build your particular application.

---

Generic information:

Angular lets you make a webapp, to be hosted on some domain.

A project is made up of some number of components, which must be included in an app.modules.ts file (done automatically when you create them using the angular-cli).

Components can be put on different urls, managed via a router (app.routing.ts, also auto-generated), or can be nested inside each other. Each component needs an html template, to describe how it gets displayed. You can directly use attributes from the component class inside the html.

You don't necessarily need a route and a component for each of your walkthrough screens though - angular's power is in being able to create a single page that changes dynamically in response to user input. Most webapps will need many pages that each can change in response to input, but in your case, I'd expect you'd only need a single page. (Look into Single Page Applications - SPA)

---

So what pieces exist on that slack tutorial? There's a background, a static 'skip' button, 1 or 2 dynamic arrows, and a sequence of dots at the bottom. I'd expect you'll want a single component, with a list of backgrounds. Look into *ngIf for the arrows, *ngFor, and the router for your skip button.

Instead of a list of backgrounds though, you could use have one main component, and a set of components for each subpage, using mat-tab-groups. It'd make it fairly simple to make the pages switch nicely.