Skip to main content

​
Overview

FooterComponent is a simple footer component that displays social media links and other footer content. It uses Angular Material button and icon components with integrated analytics tracking.

​
Selector

'jet-footer'

​
Usage

<jet-footer></jet-footer>
The component is typically used within the main application layout (AppComponent) at the bottom of the content area.

​
Features

  • Social Media Links: Includes link to Jet’s X (Twitter) profile
  • Analytics Tracking: Automatically tracks clicks on social links
  • Material Design: Uses Material button and icon components
  • Internationalization: Text is translatable via Transloco
  • Accessible: Proper semantic HTML with accessible labels

​
Template

The component renders a centered container with social media links: 
<div class="jet-flexc-centered">
  <a
    href="https://x.com/jetprojectdev"
    matButton
    target="_blank"
    [jetAnalyticsEvent]="{ name: 'open_x_profile' }"
  >
    <mat-icon>alternate_email</mat-icon>
    <span>jetprojectdev</span>
  </a>
</div>

​
Analytics Events

The component tracks these analytics events:
​
open_x_profile
AnalyticsEvent
Triggered when user clicks the X (Twitter) profile link

​
Dependencies

The component uses:
  • MatButtonModule - Material button styles
  • MatIconModule - Material icons
  • AnalyticsDirective - Analytics event tracking
  • TranslocoModule - Internationalization
  • LoggerService - Component initialization logging

​
Customization

To customize the footer, you can: Edit the template to include additional social or information links: 
<div class="jet-flexc-centered">
  <a href="https://x.com/jetprojectdev" matButton target="_blank"
     [jetAnalyticsEvent]="{ name: 'open_x_profile' }">
    <mat-icon>alternate_email</mat-icon>
    <span>jetprojectdev</span>
  </a>
  
  <a href="https://github.com/your-org" matButton target="_blank"
     [jetAnalyticsEvent]="{ name: 'open_github' }">
    <mat-icon>code</mat-icon>
    <span>GitHub</span>
  </a>
</div>

​
Update Translations

Add translation keys in your translation files (e.g., en.json): 
{
  "jet-footer": {
    "follow-us": "Follow us on social media"
  }
}

​
Styling

Customize the footer appearance in footer.component.scss: 
.jet-flexc-centered {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { AnalyticsDirective } from '@jet/directives/analytics/analytics.directive';

@Component({
  selector: 'jet-footer',
  standalone: true,
  imports: [MatButtonModule, MatIconModule, AnalyticsDirective],
  template: `
    <div class="footer-content">
      <div class="social-links">
        <a href="https://x.com/jetprojectdev" matButton target="_blank"
           [jetAnalyticsEvent]="{ name: 'open_x_profile' }">
          <mat-icon>alternate_email</mat-icon>
          <span>@jetprojectdev</span>
        </a>
      </div>
      
      <div class="copyright">
        <p>© 2024 Jet Project. All rights reserved.</p>
      </div>
    </div>
  `
})
export class FooterComponent {}

​
Accessibility

  • Uses semantic <a> tags for links
  • Material buttons include proper focus states
  • External links open in new tab with target="_blank"
  • Icons supplemented with text labels

​
Source

Location: src/app/components/footer/footer.component.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us