Is it possible to apply Mat-card to an Anchor Element?

How can I make a mat-card clickable and show a link cursor when hovered over? I have multiple cards and when I click on one, I want to navigate to another page. What is the best way to achieve this?

Is it acceptable to use the following code in my template html?

<a mat-card   routerLink= ...>  Buy  </a>

My initial attempt looked like this:

        <div fxLayout="row rap">
           <mat-card> 
                <mat-card-content> 
                   <div> $100 </div> 
                   <div> 3000 ETB</div>
               </mat-card-content> 
           </mat-card>
        <mat-card> .... </mat-card>
     </div>
cssangulartypescriptangular-materialmat-card

Answer №1

<a *ngFor="let card of childCards" [routerLink]="[card?.targetUrl]">
Include mat card code within the anchor tag.

Answer №2

What if we encase the mat-card within an <a> tag, ensuring to eliminate the underline styling?

relevant HTML:

<a class='removeStyle' href='#'>
    <mat-card class="example-card">
    ....
    </mat-card>
</a>

relevant CSS:

.removeStyle{
  text-decoration: none;
}

see the full implementation on StackBlitz here

Answer №3

Creating Clickable Cards

<div (click)="handleClick(100)"> 
    <div> $100 </div> 
    <div> 3000 ETB</div>
</div>

<div (click)="handleClick(200)"> 
    <div> $200 </div> 
    <div> 4000 ETB</div>
</div>

Styling for Clickable Cards

div {
  cursor: pointer;
  margin-bottom: 1rem;
}

JavaScript Function

handleClick(id) {
    alert('Clicked with ID ' + id);
}

See the live demo here: https://stackblitz.com/edit/angular-zr3tqo

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

Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the ...

htmlcssangulargoogle-visualization

When in production mode, parameter routing and conditions do not function as expected

I have a straightforward routing setup like the following: import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'scenario', ...

angularionic-frameworkionic4

Angular 9 - Displaying a set number of a component's child elements

Is there a way to dynamically render limited number of ButtonAction components in a ButtonGroup component without the error "No provider for TemplateRef"? I attempted to assign a template property (TemplateRef) to each ButtonAction, so that I can loop o ...

angularangular-directiveangular-components

The 'RegExpExecArray | null' type is required to include a method '[Symbol.iterator]()' which returns an iterator to iterate through its values

As someone who is new to TypeScript, I have a good understanding of the basics but recently came across a typecast error that I am struggling to solve. const [full, id]: string | null = /.*media\/[^\/]+\/(.*)/.exec(item.uri) When it comes t ...

javascriptregextypescripttypeerror

The component prop of Typography in TypeScript does not accept MUI styling

Working with MUI in typescript and attempting to utilize styled from MUI. Encountering an error when passing the component prop to the styled component. The typescript sandbox below displays the issue - any suggestions for a workaround? https://codesandbo ...

reactjstypescriptmaterial-uistyled-components

Expand the spectrum of the input range

Is there a way to make the cursor and bar of a range input bigger without changing their length? <input id="speed" type="range" min="10" max="80" /> Any suggestions on how to achieve this? Appreciate your assistance. ...

htmlcssrange

Boost the dimensions of the content property within a CSS class

I am currently using the content property to display a dashed arrow "-->" in my CSS class. However, the arrow appears very small and I would like to increase its size directly in the CSS class itself. This arrow is meant to be displayed before each elem ...

htmlcss

What is the method for altering the track color on a range slider?

Struggling to change the track color of a range slider using CSS in Chrome? Look no further, as I found a solution using jQuery (link). However, after implementing the solution, the expected output is not achieved. jQuery: $('.text-size-slider .slid ...

javascriptjquerycssangularjs

How can we add a key:value pair at a specific position in an array in Angular 2 using Typescript?

Is there a way to insert a key value pair at a specific index in an array? I am currently struggling with this task. Here is the code I have been working on: this.quiz.push( { "question-no":this.no, "Ans":this.ans } I require this functionality to ...

arraysobjecttypescriptkey-valueangular2-directives

CSS list items do not expand

I have a list with links inside each item and I want the item size to remain fixed regardless of content. Below is the CSS code: .files { display: inline-block; padding: 0; margin: 0 auto; } .files li { display: inline; } .files l ...

htmlcsslistflexboxhtml-lists

Ensuring data types for an array or rest parameter with multiple function arguments at once

I am looking for a way to store various functions that each take a single parameter, along with the argument for that parameter. So far, I have managed to implement type checking for one type of function at a time. However, I am seeking a solution that al ...

typescript

How to customize the appearance of an element within a shadow DOM

I am currently implementing a custom CSS style over an application without the ability to modify its code. Initially, the DOM structure looked like this: <div class="foo"> <div class="bar"></div> </div> and I ...

cssshadow-dom

Reverting a concealed segment

Can anyone make sense of my unconventional explanation? I've set up a hidden section as shown below: <section class="intro"> <label> <input type="checkbox"> <span class="menu"> <span class="hamburger"></span&g ...

javascriptjqueryhtmlcss

Upon receiving data from the Api, the data cannot be assigned to the appropriate datatype within the Angular Object

I am encountering an issue with the normal input fields on my page: https://i.stack.imgur.com/qigTr.png Whenever I click on the "+" button, it triggers an action which in turn calls a service class with simple JSON data. My intention is to set selectionC ...

javascriptangulartypescriptangular6

Is it possible to utilize Bootstrap Icons as bullet points on a website?

Is it possible to use Bootstrap icons for bullet points with CSS? I am aware that FontAwesome can be used for this purpose, but I would like to confirm if the same can be achieved using Bootstrap. Though there is a method using: <ul> <li>< ...

htmlcssbootstrap-5

Having trouble with obtaining precise mouseup and mousedown coordinates

Currently, I am working with react and typescript for my project. I have implemented a canvas element where I am attempting to draw a rectangle based on mouseup and mousedown events. However, the issue I am facing is that the rectangles are being drawn in ...

reactjstypescript

Dynamically setting attributes with ngFor iteration

I am attempting to dynamically set the selected attribute based on matching index values. <select class="form-control" disabled> <option *ngFor="let agency of request.agencyList" [attr.selected]="request.agencyIndex == agency">{{agency}}{{re ...

angular

Is there a way for a dialog to prompt a Parent Window to refresh its grid?

My Angular Material Grid has an Edit option that opens a form using mat-dialog when clicked. Upon trying to close the form, another dialog prompts the user to save the changes made. If the user chooses to save, the data is sent to the backend via API and b ...

angularangular-material

Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

I have an image marking a scale, with the marker's position in HTML set as: <image class="red-marker" xlink:href="./assets/images/marker.png" [attr.x]=percentage width="12" height="40" y="0" ></image> But I want the middle of the marker ...

javascriptcssimagealignment

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

javascripthtmlcss