akveo / akveo/nebular

[Menu] Overriding nb-menu and corresponding menu-items

Abierto
#1,055 3 comentarios 5 reacciones 0 asignados Ver en GitHub
module:components needs docs needs info question
Lenguaje dominante
TypeScript
Estrellas
8.1k
Forks
1.5k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### Issue type

**I'm submitting a ...** (check one with "x")

* [x] bug report
* [x?] feature request

### Issue description

**Current behavior:**
I am trying to extend the NbMenu and NbMenuItem components. The nebular library has some hard-coded values for handling toggling of different states that check for hard-coded selectors in the code. In this case, toggling the sidebar to expand when select a menu group that has children will ONLY expand the sidebar if the selector is 'nb-menu' via a query selector.

**Expected behavior:**
I should be able to extend these components without styling being affected or needing to worry about using an existing selector for proper functionality. I would like to be able to add an icon to each menu item with the ability to click the icon and 'favorite' the menu item without navigating to another page.

**Steps to reproduce:**
Simply extend these components in your on component and then change the selectors in the ngx-admin template demo.

**Related code:**
Here is the code I am trying to write to extend. I am curious of a few things:
1) Can I simply inherit the parent's 'selector' and 'styleUrl' while overriding the 'templateUrl'?
2) What all is required to actually override the nb-menu component successfully?

```
import {
Component,
Input,
Output,
EventEmitter,
} from '@angular/core';

import { NbMenuItemComponent, NbMenuComponent } from '@nebular/theme/components/menu/menu.component';
import { NbMenuItem } from '@nebular/theme/components/menu/menu.service';

export class IntranetMenuItem extends NbMenuItem {
/**
* Is Favorite
* @type {boolean}
*/
isFavorite?: boolean = false;
}

@Component({
selector: '[intranetMenuItem]',
templateUrl: './menu-item.component.html',
})
export class IntranetMenuItemComponent extends NbMenuItemComponent {
@Output() favoriteClick = new EventEmitter();

onFavoriteClick(item: IntranetMenuItem) {
this.favoriteClick.emit(item);
}
}

@Component({
selector: 'intranet-menu',
styleUrls: ['~/node_modules/@nebular/theme/components/menu/menu.component.scss'],
template: `


`,
})
export class IntranetMenuComponent extends NbMenuComponent {

onFavoriteClick(item: IntranetMenuItem) {
console.log(item.title);
}
}
```

### Other information:

**npm, node, OS, Browser**
```
Node: 8.12.0
NPM: 6.4.1
OS: Windows 10
Browser: Chrome and Edge
```

**Angular, Nebular**
```
"@angular/animations": "^7.0.3",
"@angular/cdk": "^7.0.3",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/router": "^7.0.3",
"@nebular/auth": "3.0.0",
"@nebular/bootstrap": "3.0.0",
"@nebular/security": "3.0.0",
"@nebular/theme": "3.0.0",
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.