In my app.component.html file, I have the following code:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<div>
<p-menu [model]="items"></p-menu>
</div>
Below is the code from my app.component.ts file:
import { Component } from '@angular/core';
import {MenuModule} from 'primeng/menu';
import {MenuItem} from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Demo';
items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'New', icon: 'pi pi-fw pi-plus'},
{label: 'Open', icon: 'pi pi-fw pi-download'},
{label: 'Undo', icon: 'pi pi-fw pi-refresh',url: 'http://www.google.com'}
];
}
}
When clicking on "Undo," it redirects completely to the Google website. My goal is to open the Google website within my application.
https://i.sstatic.net/6qS4t.png
Here's the scenario:
A menu exists in the Masterpage. When a user clicks on any menu link in the master page, data should be displayed in the details page.