src/grid/grid.directive.ts
Get started with importing the module:
Example :import { GridModule } from 'carbon-components-angular';
OnInit
OnDestroy
| Providers |
{
provide: GridService, deps: [[new Optional(), new SkipSelf(), GridService]], useFactory: (parentService: GridService) => {
return parentService || new GridService();
}
}
|
| Selector | [cdsGrid], [ibmGrid] |
Properties |
|
Methods |
Inputs |
HostBindings |
|
Accessors |
constructor(gridService: GridService)
|
||||||
|
Defined in src/grid/grid.directive.ts:101
|
||||||
|
Parameters :
|
| condensed | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/grid/grid.directive.ts:40
|
|
|
Set to |
|
| fullWidth | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/grid/grid.directive.ts:48
|
|
|
Set to |
|
| narrow | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/grid/grid.directive.ts:44
|
|
|
Set to |
|
| useCssGrid | |
Type : boolean
|
|
|
Defined in src/grid/grid.directive.ts:52
|
|
|
Set to |
|
| class.cds--css-grid |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:76
|
| class.cds--css-grid--condensed |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:79
|
| class.cds--css-grid--full-width |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:85
|
| class.cds--css-grid--narrow |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:82
|
| class.cds--grid |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:62
|
| class.cds--grid--condensed |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:65
|
| class.cds--grid--full-width |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:71
|
| class.cds--grid--narrow |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:68
|
| class.cds--subgrid |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:90
|
| class.cds--subgrid--condensed |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:93
|
| class.cds--subgrid--narrow |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:96
|
| class.cds--subgrid--wide |
Type : boolean
|
|
Defined in src/grid/grid.directive.ts:99
|
| ngOnDestroy |
ngOnDestroy()
|
|
Defined in src/grid/grid.directive.ts:127
|
|
Unsubscribe from Grid Service subscription
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/grid/grid.directive.ts:105
|
|
Returns :
void
|
| Private cssGridEnabled |
Default value : false
|
|
Defined in src/grid/grid.directive.ts:57
|
| Private isSubgrid |
Default value : false
|
|
Defined in src/grid/grid.directive.ts:58
|
| Private subscription |
Default value : new Subscription()
|
|
Defined in src/grid/grid.directive.ts:59
|
| useCssGrid | ||||||
setuseCssGrid(enable: boolean)
|
||||||
|
Defined in src/grid/grid.directive.ts:52
|
||||||
|
Set to
Parameters :
Returns :
void
|
| flexGrid |
getflexGrid()
|
|
Defined in src/grid/grid.directive.ts:62
|
| flexCondensed |
getflexCondensed()
|
|
Defined in src/grid/grid.directive.ts:65
|
| flexNarrow |
getflexNarrow()
|
|
Defined in src/grid/grid.directive.ts:68
|
| flexFullWidth |
getflexFullWidth()
|
|
Defined in src/grid/grid.directive.ts:71
|
| ccsGrid |
getccsGrid()
|
|
Defined in src/grid/grid.directive.ts:76
|
| ccsCondensed |
getccsCondensed()
|
|
Defined in src/grid/grid.directive.ts:79
|
| ccsNarrow |
getccsNarrow()
|
|
Defined in src/grid/grid.directive.ts:82
|
| ccsFullWidth |
getccsFullWidth()
|
|
Defined in src/grid/grid.directive.ts:85
|
| subGrid |
getsubGrid()
|
|
Defined in src/grid/grid.directive.ts:90
|
| subCondensed |
getsubCondensed()
|
|
Defined in src/grid/grid.directive.ts:93
|
| subNarrow |
getsubNarrow()
|
|
Defined in src/grid/grid.directive.ts:96
|
| subFullWidth |
getsubFullWidth()
|
|
Defined in src/grid/grid.directive.ts:99
|
| cssGridChildren | ||||||
setcssGridChildren(list: QueryList
|
||||||
|
Defined in src/grid/grid.directive.ts:112
|
||||||
|
Parameters :
Returns :
void
|
import {
ContentChildren,
Directive,
HostBinding,
Input,
OnDestroy,
OnInit,
Optional,
QueryList,
SkipSelf
} from "@angular/core";
import { Subscription } from "rxjs";
import { GridService } from "./grid.service";
/**
* Get started with importing the module:
*
* ```typescript
* import { GridModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-grid--basic)
*/
@Directive({
selector: "[cdsGrid], [ibmGrid]",
providers: [
{
provide: GridService,
deps: [[new Optional(), new SkipSelf(), GridService]],
useFactory: (parentService: GridService) => {
return parentService || new GridService();
}
}
]
})
export class GridDirective implements OnInit, OnDestroy {
/**
* Set to `true` to condense the grid
*/
@Input() condensed = false;
/**
* Set to `true` to use narrow grid
*/
@Input() narrow = false;
/**
* Set to `true` to use the full width
*/
@Input() fullWidth = false;
/**
* Set to `true` to use css grid
*/
@Input() set useCssGrid(enable: boolean) {
this.cssGridEnabled = enable;
this.gridService.updateGridType(enable);
}
private cssGridEnabled = false;
private isSubgrid = false;
private subscription = new Subscription();
// Flex grid
@HostBinding("class.cds--grid") get flexGrid() {
return !this.cssGridEnabled;
}
@HostBinding("class.cds--grid--condensed") get flexCondensed() {
return !this.cssGridEnabled && this.condensed;
}
@HostBinding("class.cds--grid--narrow") get flexNarrow() {
return !this.cssGridEnabled && this.narrow;
}
@HostBinding("class.cds--grid--full-width") get flexFullWidth() {
return !this.cssGridEnabled && this.fullWidth;
}
// CSS Grid
@HostBinding("class.cds--css-grid") get ccsGrid() {
return this.cssGridEnabled && !this.isSubgrid;
}
@HostBinding("class.cds--css-grid--condensed") get ccsCondensed() {
return this.cssGridEnabled && !this.isSubgrid && this.condensed;
}
@HostBinding("class.cds--css-grid--narrow") get ccsNarrow() {
return this.cssGridEnabled && !this.isSubgrid && this.narrow;
}
@HostBinding("class.cds--css-grid--full-width") get ccsFullWidth() {
return this.cssGridEnabled && !this.isSubgrid && this.fullWidth;
}
// CSS Sub Grid
@HostBinding("class.cds--subgrid") get subGrid() {
return this.cssGridEnabled && this.isSubgrid;
}
@HostBinding("class.cds--subgrid--condensed") get subCondensed() {
return this.cssGridEnabled && this.isSubgrid && this.condensed;
}
@HostBinding("class.cds--subgrid--narrow") get subNarrow() {
return this.cssGridEnabled && this.isSubgrid && this.narrow;
}
@HostBinding("class.cds--subgrid--wide") get subFullWidth() {
return this.cssGridEnabled && this.isSubgrid && this.fullWidth;
}
constructor(private gridService: GridService) {}
ngOnInit() {
this.subscription = this.gridService.gridObservable.subscribe((isCssGrid: boolean) => {
this.cssGridEnabled = isCssGrid;
});
}
// Make all children grids a sub grid
@ContentChildren(GridDirective, { descendants: true }) set cssGridChildren(list: QueryList<GridDirective>) {
if (this.cssGridEnabled) {
list.forEach((grid) => {
// Prevents initial (parent) grid element from being turned into a subgrid
if (grid === this) {
return;
}
grid.isSubgrid = true;
});
}
}
/**
* Unsubscribe from Grid Service subscription
*/
ngOnDestroy() {
this.subscription.unsubscribe();
}
}