CODEWITHSUNDEEP
cssangularcss-grid
naitsirhc
naitsirhc

Reputation: 133

Using CSS-Grid Layout in Angular

I am fairly new to Angular (and SPA/Web development in general) and trying to get Angular working together with the new CSS-Grid layout.

Chances are I am simply not importing/injecting a required module but in any case cannot get this to work without getting errors. I did search but could not really find any guide or tutorial for this (Angular and CSS-Grid). There is some information about the CSS-Grid of course but close to nothing related to Angular.

I tried for example the following (taken from here http://maddesigns.de/css-grid-layout-2764.html):

/* CSS */
.wrapper {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;   
}
    
   
 <!-- HTML -->
<div class="wrapper">
   <div class="box a">.a</div>
   <div class="box b">.b</div>
   <div class="box c">.c</div>
   <div class="box d">.d</div>
 </div>

That snippet works here ('Run Code snippet').

But if I create a new angular/CLI project and copy the code straight to app.component.css and app.component.html (probably a bit naive) then it is kind of working but in Firefox I am also getting the error "Error when processing the value 'display'. Declaration ignored." (translated manually from German to English)

This makes me believe I am missing something fundamentally I am not aware of.

Upvotes: 2

Views: 7317

Answers (2)

Emre HIZLI
Emre HIZLI

Reputation: 520

i think this will helps for you;

@Directive({
  selector: "[v-grid]"
})
export class GridDirective {
  @HostBinding("style.grid-template-columns")
  @Input() columns: string;
  @HostBinding("style.grid-template-rows")
  @Input() rows: string;
  @HostBinding("style.grid-template-areas")
  @Input() areas: string;

  constructor(private readonly el: ElementRef, private readonly renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, "display", "grid");
    this.renderer.setStyle(this.el.nativeElement, "height", "100%");
  }
}

@Directive({
  selector: "[v-grid-area]"
})
export class GridAreaDirective {
  @HostBinding("style.grid-area")
  @Input("v-grid-area") area: string;
}

Using like this;

<div v-grid columns="1fr 100px" rows="1fr 1fr" areas="'area1 area2' 'area1 area2'">
   <div v-grid-area="area1" style="background-color: red">
      <div style="height: 1000px"></div>
   </div>
   <div v-grid-area="area2" style="background-color: yellow"></div>
</div>

Upvotes: 0

naitsirhc
naitsirhc

Reputation: 133

The code is fine, the issue turned out to be browser related which just shows how new I am to web development.

I tested some browsers:

  • IE 11: does not work, exception
  • Chrome 62: works, no warnings
  • Firefox 56: works, but shows the warning mentioned in the question
  • Firefox 57 (Quantum): works, no warnings

Upvotes: 1

Related Questions