Action buttons in Angular Card component

26 Jul 20265 minutes to read

Action buttons provide interactive controls within the Card component and can be customized for various use cases. Action buttons are contained within a div element with the e-card-actions class, which holds button or anchor elements within the card root element.

  • To add action buttons, create a button or anchor tag with the e-card-btn class within the card action container element.
    <div class = "e-card">
        <div class="e-card-actions">
            <button class="e-card-btn">More</button>
            <a href="#">Share</a>
        </div>
    </div>

Vertical

By default, action buttons are positioned horizontally, and they can also be aligned vertically by adding the e-card-vertical class.

    <div class = "e-card">
        <div class="e-card-actions e-card-vertical">
            <button class="e-card-btn">More</button>
            <a href="#">Share</a>
        </div>
    </div>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'



import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
        
    ],


standalone: true,
    selector: 'app-container',
    template: `
   <div style="margin: 50px;">
        <div class="e-card" style="max-width:400px">
            <div class="e-card-header-title">Eiffel Tower</div>
            <div class="e-card-content">
               The Eiffel Tower is acknowledged as the universal symbol of Paris and France.
            </div>
            <div class="e-card-actions">
                <button  class="e-card-btn">
                    <img src="./fav.png" style="height: 18px;width: 18px;" title="Bookmark">
                </button>
                <button class="e-card-btn">
                    <img src="./like.png" style="height: 18px;width: 18px;" title="Like">
                </button>
                <button class="e-card-btn">
                    <img src="./share.png" style="height: 18px;width: 18px;" title="Share">
                </button>
            </div>
        </div>
    </div>
    <div style="margin-left: 50px;">
            <div class="e-card" style="max-width:400px">
                <div class="e-card-header-title">Eiffel Tower</div>
                <div class="e-card-content">
                    The Eiffel Tower is acknowledged as the universal symbol of Paris and France.
                </div>
                <div class="e-card-actions e-card-vertical">
                    <button class="e-card-btn">LIKE</button>
                    <button class="e-card-btn">SHARE</button>
                </div>
            </div>
        </div>
        `
})

export class AppComponent {
    @ViewChild('element') element: any;

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also