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
Inputs
Outputs

Constructor

constructor()

Inputs

listClass

Type: string

menu

Type: any

Outputs

select $event type: EventEmitter

Methods

menuClick
menuClick(item: )
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 ""