"Step-by-Step Guide: Building a Previous and Continue Button in Angular

I am a beginner with Angular and I am working on adding a Next button to navigate to the next page. However, I want the button to only proceed if the answer to a specific question is yes. If the answer is no, I would like it to skip a part of the page. Hopefully that explanation makes sense, but I can provide more clarity if needed.

const routes: Routes = [
{path:'', redirectTo:'home',pathMatch: "full"},
{path:'home', component: HomeComponent},
{path:'veteran', component: VeteranComponent},
{path:'veteran-snap', component: VeteranSnapComponent},
{path:'almost', component: AlmostComponent},
{path:'signature', component: SignatureComponent}
];

This code snippet represents my route configuration.

angulartypescript

Answer №1

within the template

<input type="checkbox" #question name="quesiton1">
<button (click)="navigateIfYes(question.checked)">Proceed to Next</button>

inside the component

import {Router} from "@angular/router";

constructor(private router: Router) {}

navigateIfYes(value: string) {
    this.router.navigateByUrl(!!value ? VALUE_CHECKED_PAGE : VALUE_UNCHECKED_PAGE).catch(console.error);
}

This serves as a basic illustration, though addressing the question's broad nature makes it challenging to offer detailed guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with identifying the standard property `form.invalid` in a template-based form during testing

In my pursuit to test a template driven form, I aim to ensure that the user enters a name by initially disabling the form's button. This is achieved through the use of the 'required' property on the input field for the name. To implement th ...

angularjasminekarma-jasminekarma-runner

What is the reason behind TypeScript compiler not throwing an error when a function's return type is defined as a number but the function actually returns undefined

Why does TypeScript not show an error when a function returns null or undefined while the function's return type is number. //gives error //Error : A function whose declared type is neither 'void' nor 'any' must return a value.ts(2 ...

typescriptfunctiontypesreturn

Angular code for opening a PDF from an API response in a new tab

It's been nearly three days and I could really use some assistance with this issue I'm facing. Inside my Node application, there is an API call that utilizes HTTPS to connect to an external API and retrieve a PDF file. The PDF code snippet looks ...

node.jsangularrestpdf

Creating dynamic text bubble to accommodate wrapped text in React using Material-UI (MUI)

I am currently developing a chat application using ReactJS/MUI, and I have encountered an issue with the sizing of the text bubbles. The bubble itself is implemented as a Typography component: <Typography variant="body1" sx={bubbleStyle}> ...

htmlcssreactjstypescriptmaterial-ui

How can I remove a field from every array within an object of arrays using Angular 9?

Suppose I have a list named indexesToBeRemoved with the following elements: indexesTobeRemoved = ['auto_id', 'auto_date'] I want to iterate through an array of arrays as shown below: allArrays = [ { &apo ...

javascriptarraysangularsplice

The NgRx Effect causing an endless cycle of HTTP requests

I am currently experiencing the following effect: initCompaniesAndSetCompanyEffect$: Observable<Action> = createEffect( (): Observable<Action> => this.actions$.pipe( ofType<changeCompanyActions.InitCompaniesAction>( ...

angulartypescriptngrx-effects

Refused to run script from inline content on the lightweight server due to security policy restrictions

I have been adhering to Angular's best practices in order to create a Progressive Web App (PWA). After building the production version (ng build --prod --aot), I am running it from the dist folder on localhost using npm run dev ("dev": "lite-server"). ...

angularlite-server

Unable to display the minimum height for a bar in Highcharts

Is there a way to set a minimum height for the bar/column/stacked-column chart in Highcharts when there is a significant difference in values? I am having trouble seeing any plot for the minimum value. My series could look like this: [10000012123, 78, 578 ...

angulard3.jschartshighchartsangular2-highcharts

Explore Angular's ability to transform a nested observable object into a different object

My task involves mapping a field from a sub object in the response JSON to the parent object The response I receive looks like this: { "id": 1, "name": "file-1", "survey": { "identifier": 1, "displayedValue": survey-1 } } I am attempting ...

angulartypescriptrxjs

Achieve the capability to upload multiple files in Next.js using the upload.io integration feature

I'm currently using upload.io for uploads and replicate.com for an AI model on a specific app. I am able to upload one picture, but unfortunately, I am encountering issues when trying to upload multiple pictures. Can anyone identify the problem here? ...

reactjstypescriptnext.jsfile-uploadupload

Value of type 'string' cannot be assigned to type '{ model: { nodes: []; links: []; }; }'

I am a beginner in TypeScript and I have added types to my project. However, I am encountering an error with one of the types related to the graph: Type 'string' is not assignable to type '{ model: { nodes: []; links: []; }; }'.ts(2322) ...

javascriptreactjstypescriptfunctionredux-toolkit

Converting data types of a destructured property

In my Next.js application, I'm using a router hook and destructuring like this: const { query: { run_id }, } = useRouter(); The type of `run_id` is as follows: run_id: string | string[] | undefined I tried to typecast it as shown below, but it doe ...

typescript

Having difficulty grasping the concept of a component in Angular that utilizes a service which incorporates the HttpModule

I just started learning Angular and I'm grappling with a testing issue. After studying how the framework functions, I noticed that a component using a service which incorporates HttpModule requires the HttpModule to be imported in the component test ...

angularjasmineangular-servicesangular-components

Issue with Datatables not loading on page reload within an Angular 7 application

Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...

node.jsangulartypescriptdatatables

What could be causing Store.getState() to return an 'any' type following the implementation of rootReducer with combinedReducers?

Seeking assistance with utilizing a root reducer to encapsulate my combined reducers for the purpose of resetting them upon a reset store action. However, I am facing an issue where I cannot directly access the reducers using Store.getState().recuder1 ...

typescriptreduxreact-reduxredux-reducers

What is the best way to display various components based on the user's device type, whether it be web

How can I use Angular 7, TypeScript, bootstrap, ngx-bootstrap, etc., to switch between components based on the user's device (desktop vs mobile)? I have noticed that many websites display different components when resized. I wonder if these are simpl ...

angulartypescriptangular-components

Angular: navigate to a different page dynamically without triggering a refresh of the current page

Within my EditUserComponent, I am utilizing a path parameter called id. If the id is invalid, I would like to redirect to either the home page or an error page without having to refresh the entire page. Is there a way to achieve this without updating the ...

angularangular-ui-router

The authentication0 router fails to initiate navigation

I'm currently using Auth0 in combination with Angular 2. The issue I am encountering is that my login code isn't redirecting to the home page after authentication. Based on my understanding, Auth0 does not handle the redirection process itself. ...

javascriptangularauth0

Equivalent Types that Do Not Compile

After reading the article on Building Complex Types in TypeScript Part 2, I encountered issues with the Equal Type code provided: Implementing Type Equality type Equal<A, B> = (<T>() => T extends A ? true : false) extends (<T> ...

typescript

Tips for adjusting HighCharts layout with highcharts-vue integrations

I have a fairly simple component: <template> <div> <chart v-if="!loading" ref="priceGraph" constructor-type="stockChart" :options="chartData" ...

javascripttypescriptvue.jshighchartsvuejs2