9

I am very new to Angular / coming at this from the UI design side, so my terminology and understanding of basic Angular concepts is limited.

My team has started building a site using Angular Material, and as the designer I'm trying to determine how to balance the benefits of an out-of-the-box tool like Material with the need for quite a bit of customization (mostly in the styles).

I'd like to essentially build a custom library on top of existing Material components. I'd also like to structure this so it's very modular - i.e. rather than operating with huge/monolithic HTML and CSS files, I'd like to have single, smaller components for buttons, etc., with their own separate HTML and CSS.

What I tried to do was simply wrap an Angular Material component in a new component I'd created, like so:

button.component.ts:

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

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.less']
})
export class ButtonComponent implements OnInit {
  @Input()
  color;
  disableRipple: boolean;

  constructor() {}

  ngOnInit() {}
}

button.component.html:

<button mat-button [color]="color" [disableRipple]="true">
  <ng-content></ng-content>
</button>

I'm aware that I'll have to "pass down" some properties; haven't gotten that far yet. The issue I'm having is that the way I've tried to solve this problem results in a new DOM element, "ui-button", where I'd rather not have one since it causes focus issues, etc. Is there some other way to do this? Some way to extend the Angular Material component?

narwhald
  • 91
  • 1
  • 3
  • 4
    If you find that the default styles of the Angular Material components or more generally Material Design - not including color and typography - do not meet your requirements, I suggest using something else. It really isn't something that can be easily and effectively "re-styled" and has never been meant for that. – G. Tranter Oct 15 '19 at 19:52
  • a look at the source code might help : https://github.com/angular/components/tree/master/src/material – Abhinav Atul Oct 17 '20 at 14:34
  • This answer might help: https://stackoverflow.com/a/56108999/403999 – Juan Rojas May 06 '21 at 00:47

0 Answers0