I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure:
<mat-card class="card" >
<mat-card-content>
<mat-card-title> {{title}}</mat-card-title>
<mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
</mat-card-content>
</mat-card>
Any suggestions on how I can achieve this?
Appreciate any help.
utilize the routerLink attribute
<mat-card-content routerLink = "path">
<mat-card (click)="doStuff()" class="card" >
<mat-card-content>
<mat-card-title> {{title}}</mat-card-title>
<mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
</mat-card-content>
</mat-card>
Afterwards, the click event should be handled accordingly.
If you find yourself needing to perform any operations before navigating, it is recommended to use the click method for handling these operations and navigation.
Here is an example using HTML:
<mat-card class="card" (click)="navigate()">
<mat-card-content>
<mat-card-title> {{title}}</mat-card-title>
<mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
</mat-card-content>
</mat-card>
And here is an example in TypeScript:
import { Router } from '@angular/router';
constructor(private router:Router){
}
navigate(){
// Perform any necessary operations here
this.router.navigate(['path']);
// Alternatively, you can navigate by URL like this
this.router.navigateByURL(['path']);
}
It's important to consider accessibility when designing interactive elements like cards that behave as buttons. Make sure to properly label the card as a button for assistive devices. Refer to the ARIA Authoring Practices Guide for button examples.
Additionally, include default event bindings for common button interactions like click, pressing the space key, and pressing the enter key. If you're using a router in your application, follow advice from Karnan Muthukumar to handle the router navigation in TypeScript rather than HTML to ensure proper event handling.
<mat-card role="button" tabindex="0" class="is-focusable"
(click)="cardEventHandler()
(keydown.enter)="cardEventHandler()"
(keydown.space)="cardEventHandler(); $event.preventDefault()">
<mat-card-title> {{title}} </mat-card-title>
<mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
<mat-card-content> {{content}} </mat-card-content>
</mat-card>
Note: Be cautious with the space key event binding as it may trigger unwanted scrolling. Using keydown.space instead of keyup.space can help prevent this issue. You can use preventDefault() in the HTML or within your method by passing $event and calling preventDefault().
The .is-focusable class enhances the card's usability by providing custom focus styling such as a pointer cursor and visible focus state.
.is-focusable {
cursor: pointer;
}
.is-focusable:focus-visible {
outline: none;
background-color: #efefef;
box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f;
}
You have flexibility in styling the focus state to match your design aesthetics while ensuring keyboard users can easily identify when the card is in focus.
If you want to create a dynamic route, you can utilize the [routerLink] directive in the following way:
We access the title using event binding. It is possible to combine dynamic values with static values.
For instance, if there is a variable called team in our component with an id property, we can set up a path like this:
[routerLink]="['/teams', 'edit', team?.id]"In this scenario, the first and second elements of the array '/teams' and 'edit' are fixed, while team?.id is dynamic and accessed through event binding.
This would translate to: /teams/edit/3 in the browser
<mat-card class="card" [routerLink]="[title] >
<mat-card-content>
<mat-card-title> {{title}}</mat-card-title>
<mat-card-subtitle> {{subtitle}} </mat-card-subtitle>
</mat-card-content>
</mat-card>
I am facing a strange problem with RTL where everything seems to be flipped correctly except for TextInput, which only works about half of the time. Check out this gif that demonstrates the issue as I switch between English and Hebrew: (click to view a la ...
I've been struggling to add an exclamation SVG to this section, but for some reason I can't make it work. I've searched on Google for a solution, but haven't found one yet. The SVG file is already downloaded and stored in my project fo ...
I encountered errors while working on a simple socket.io project on my server. The IP address I am using is . All files are stored in public_html and can be accessed through the URL: . Here are the code snippets: <!doctype html> <html> < ...
Trying to send an ajax GET request to an external controller when a button on the form is clicked in order to use the returned data to dynamically generate "results" using PHP/HTML. The ajax code being used (using jQuery() instead of $() due to wordpress& ...
My application features StartDate and EndDate datepickers, and I need to implement a 30-day limit on the selection range to prevent performance issues caused by loading too much data. I'm looking for a functionality where if the user picks today as t ...
I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...
When conducting transactions, we often have the ability to customize certain options. For example, we can specify transaction options like the ones shown below: const transactionOptions = { readPreference: 'primary', readConcern: { level: &ap ...
When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others. Despite reading the documentation at , I encountered an issue when trying ...
type x = 'first' | 'second' I am looking to create a type y that is similar to this: type y = 'FIRST' | 'SECOND' Here is what I attempted: type x = 'first' | 'second' type y = {[key in x]: key[& ...
My experience with Angular is fairly new, and I recently encountered a debugging issue in my application that unfolded like this: Imagine I am adding a new directive to an existing module defined in another .js file. When I tried using the syntax below: ...
I need help customizing the InputUnstyled component from MUI-base. Everything works fine during runtime, but I am encountering a Typescript error when trying to access the maxLength attribute within componentProps for my custom input created with InputUnst ...
I'm attempting to showcase a collection of images stored in a specific folder within a div. My approach involves utilizing AJAX within a JavaScript file titled edit, which is positioned one directory away from the index route. This implementation is b ...
Currently, I am working on a mock authentication system in Node.js using passport and JWT. I have successfully created an API and I am using handlebars for templating. My dilemma arises when a user tries to login by sending their credentials to the API. I ...
Just starting out in JavaScript and experimenting with animations using three.js library. I'm trying to grasp the meaning behind: const scene = new THREE.Scene(); Why is the "THREE" necessary in THREE.Scene? Could we not simply write const scene = n ...
According to the Angular documentation on ngIf, animations occur just after the contents change and a new DOM element is created and injected into the ngIf container. Animations In my experience, I have encountered issues with this behavior. To demonstra ...
Upon receiving the following API response: [ { "imgPaths":[ "gallery/products/55ccb60cddb4d9bded02accb26827ce4" ], "_id":"5f3e961d65c6d591ba04f3d3", "productName":" ...
My python/flask web page accepts user input and returns it back to the user without reloading the page. Instead of using a POST request, I have implemented Ajax/JavaScript to handle user input, process it through flask in python, and display the result to ...
After updating the data in my application, I want to display a success message. Although the Success function is functioning correctly, the message itself is not appearing. When I click on the save() button, a small alert box pops up but the message fails ...
I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right. https://i.stack.imgur.com/7e9sY.png Here's t ...
Is it possible that type-safety is compromised in TypeScript when dealing with JSON parsing? I should be triggering an error, but I'm not: interface Person { name: string } const person: Person = somePossibleFalsey ? JSON.parse(db.person) : undefi ...