### File

`projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts`

### Metadata

selector | `ab-wordpress-menu`

template

    <ul [ngClass]="listClass" *ngIf="menu.items.length > 0">
       <li *ngFor="let item of menu.items" (click)="menuClick(item)">
           <span>{{item.title}}</span>
       </li>
     </ul>

### Index

###### Methods

- menuClick

###### Inputs

- listClass
- menu

###### Outputs

- select

### Constructor

`constructor()`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts:16

### Inputs

`listClass` | Type: `string`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts:15

`menu` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts:14

### Outputs

`select` | `$event` type: `EventEmitter`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts:16

### Methods

menuClick
`menuClick(item: )`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-menu.component.ts:20

Parameters :

Name | Optional
item | no

Returns : `void`

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

    @Component({
        selector: 'ab-wordpress-menu',
        template: `
         <ul [ngClass]="listClass" *ngIf="menu.items.length > 0">
            <li *ngFor="let item of menu.items" (click)="menuClick(item)">
                <span>{{item.title}}</span>
            </li>
          </ul>
        `
    })
    export class WordpressMenuComponent {
        @Input() menu: any;
        @Input() listClass: string;
        @Output() select = new EventEmitter();

        constructor() { }

        menuClick(item) {
            this.select.emit(item);
        }
    }

    //     .directive('wpMenu', [ function () {
    //       //usage:  <wordpress-menu data="menus[mainMenu]" base="#/p/" depth="1"></wordpress-menu>
    //       return {
    //         restrict: "E",
    //         scope: { data: "=", base: "@", depth: "@" },
    //         controller: ['$scope', function ($scope) {
    //           $scope.$watch('data', function () {
    //             if ($scope.data === undefined) {return;}
    //             $scope.depth = $scope.depth || 1;
    //             $scope.tree = [];
    //             angular.forEach($scope.data, function (item) {
    //               item.children = [];
    //               if (item.parent_id == "0") {
    //                 $scope.tree.push(item);
    //               }
    //             });
    //             angular.forEach($scope.data, function (item) {
    //               if (item.parent_id != "0") {
    //                 angular.forEach($scope.tree, function (root) {
    //                   if(root.id==item.parent_id){
    //                     root.children.push(item);
    //                   }
    //                 })
    //               }
    //             });
    //           });
    //         }],
    //         replace:true,
    //         template: '<li ng-repeat="item in tree" ng-class="menu-item"><a href="{{base}}{{item.object_id}}">{{item.label}}</a>' +
    //         '<span ng-show="depth > 1"><ul><li ng-repeat="item in item.children" ng-class="menu-item"><a href="{{base}}{{item.object_id}}">{{item.label}}</a></li></ul></span>' +
    //         '</li>'
    //
    //       }
    //     }])

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""