Looking for guidance on creating an Onboarding/Walkthrough in Angular Material Design for Electron.
As a newcomer to Angular, I'm aiming for a desktop application similar to the image provided. It should showcase several images and offer page navigation through arrow icons.
https://i.sstatic.net/mFFhM.png
Struggling to find resources or examples to kickstart this project.
Any assistance on where to begin would be greatly appreciated.
Thank you.
Your question is like asking how to build a simple two-stroke engine. While the pieces may not be numerous, the process of designing and assembling them requires a significant amount of knowledge. That's likely why someone downvoted your question - asking more specific questions, sharing your research, attempts, and challenges faced can lead to more helpful responses.
There are plenty of tutorials available on angular, but finding one that caters to your specific needs can be more challenging. Front-end programming is unique for each project, so starting with a basic tutorial like the main Angular one can provide a solid foundation. Even if you won't use everything in your current project, it's a great way to grasp the basics and then apply them to your specific application.
General information:
Angular allows you to create webapps for hosting on domains.
A project consists of multiple components that need to be included in an app.modules.ts file (automatically done by angular-cli).
Components can be placed on different URLs managed by a router (app.routing.ts, also generated automatically) or nested within each other. Each component requires an HTML template to dictate its display. You can utilize attributes from the component class directly in the HTML.
While each walkthrough screen doesn't necessarily need its own route and component, Angular's strength lies in creating a dynamic single page that adapts to user input. Although most webapps have multiple pages that can change reactively, you may only require a single page for your project. (Consider looking into Single Page Applications - SPA)
Now, let's break down the components in that Slack tutorial. It includes a background, a static 'skip' button, 1 or 2 dynamic arrows, and a sequence of dots at the bottom. You might want a single component with a list of backgrounds, using *ngIf for the arrows, *ngFor, and the router for the skip button.
Alternatively, instead of a list of backgrounds, you could have a main component with subpage components using mat-tab-groups. This approach simplifies the page transitioning process.
I seem to be encountering an issue with destructuring my props in the context of writing a storybook for a story. It feels like there may be a mistake in my approach to destructuring. Below is the code snippet for my component: export function WrapTitle({ ...
https://i.sstatic.net/njp4A.png Upon opening the dialogue, I noticed that only the phone number, email, name, and location fields were properly styled, while the others were not and the labels weren't displaying. Prior to adding appearence="out ...
How can we indicate the TypeScript equivalent of Java's ? extends MyClass? One possible way to achieve this is: function myFunc <TComponent extends MyBaseClass>(param: ComponentFixture<TComponent>) {} Is there a more concise alternative ...
While browsing through some declaration files on DefinitelyTyped, I have noticed the following pattern: declare function domready(callback: () => any) : void; export = domready; export as namespace domready; I am familiar with the first two lines - d ...
interface Configuration { [input: string]: any; } This is really puzzling to me, the 'input' is declared as a string type with any value? Appreciate your help. ...
I recently set up a custom 404 page for my Next.js app and wanted to test it locally before deploying to the server. To do this, I used the "serve" package to host the project on my local machine. However, when I tried navigating to a non-existent page, th ...
Here is a snippet of code I'm working with in my project: describe('Feature active', () => { it('Should render a Feature', () => { const wrapper = shallow(<MyComponent prop1={1}/>); expect(wrapper.prop('p ...
I have set up my Angular app to utilize Firebase's emulators by following the instructions provided in this helpful guide. In my app.module.ts, I made the necessary configurations as shown below: import { USE_EMULATOR as USE_AUTH_EMULATOR } from &apos ...
I have successfully created a component that utilizes next/dynamic to import react-icons only when needed. However, I am struggling to properly define the TypeScript types for this component. Despite this issue, the component itself is functioning as expec ...
I am attempting to retrieve the width of a div within an mdDialog. However, the controller for the dialog runs before the HTML content loads, causing the selector to not find anything. Is there a way to employ the window.onload() or document.ready() functi ...
When a user logs out, I am using snackBar to display a message. I want to change the color of the panel from dark grey to another color and tried using the following solution: panelClass: ['danger'] supposed to change the panel color to red ( ...
Currently, I am using the code snippet below to import useState: import * as React from 'react' import {useState} from 'react' I wanted to see if there is a way to condense this into one line, so I attempted the following: import * a ...
I am currently facing an issue with two required inputs that need to be filled in order to enable the "Add" button functionality. I have considered using *ngIf to control the visibility of the button based on input values, but it seems to not be working. ...
Within the constructor of my controllers, I execute the following function: constructor(private $scope, private $log : ng.ILogService, private lobbyStorage, private socketService) { this.init(); } private init(){ this.lobbyData = []; this.initial ...
Looking to optimize my Angular application's data structure when consuming a RESTful API. My goal is to only load necessary data from the server on demand. For instance, if I have a collection of Building objects each with a set of tenant IDs in an a ...
I'm currently facing an issue where I can only pass one array item at a time through my dispatch, but I need to pass the entire array of objects. Despite having everything set up with a single array item and being able to map and display the data in t ...
I've been tackling the login functionality of a client-side application. Utilizing React alongside TypeScript, I've incorporated react-router-dom and Context to manage the user's data when they log in. However, upon refreshing the page, the ...
Received a JSON response structured like this JSON response "Terms": [ { "Help": "Terms", "EventType": "Success", "Srno": 1, "Heading": "Discount Condition", "T ...
I have implemented a modal in the root component that can be triggered from anywhere. However, I am facing a dilemma on how the bottom component can communicate with the top component without excessive use of callback functions. Root Component <contai ...
Using angular 4, I have implemented a div in my HTML to display a message when data is not found. However, the issue I am facing is that this div is shown even while the data is being fetched and has not been displayed yet. Ideally, I only want this div to ...