[Menu] Overriding nb-menu and corresponding menu-items
- 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
Evaluación
Este issue todavía no se ha evaluado.