Explore the Angular UI-Router Visualizer
design.component.ts
import { Component, OnInit, ChangeDetectorRef, EventEmitter, Output, Input } from '@angular/core';
import { AppService } from '@app/shared/app.service';
import { Schema } from '@app/shared/model/app.modal';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { StateService } from '@uirouter/core';
@Component({
selector: 'app-design-app',
templateUrl: './design-app.component.html',
styleUrls: ['./design-app.component.scss']
})
export class DesignAppComponent implements OnInit {
schema: Schema=new Schema();
fields: object[] = this.appService.fields;
mobileQuery: MediaQueryList;
isScrolled: boolean;
constructor(private appService: AppService, private $state: StateService) {
}
sideNavScrollControl() {
window.onscroll = () => {
if (document.body.scrollTop > 140 || document.documentElement.scrollTop > 140) {
this.isScrolled = true;
} else {
this.isScrolled = false;
}
};
}
previewPublish(){
this.$state.go('login');
}
ngOnInit() {
}
}
design.component.html
<!-- Preview, workflow and more actions button starts -->
<div class="preview-workflow-btn">
<button mat-raised-button type="button" class="more-actions-btn" [matMenuTriggerFor]="menu">More Actions<i class="fa fa-sort-down dropdown-icon"></i></button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Basic Details</button>
<button mat-menu-item>Settings</button>
<button mat-menu-item>Acceptance</button>
</mat-menu>
<button mat-raised-button type="button" class="workflow-btn">Workflow</button>
<button mat-raised-button type="button" class="preview-btn" (click)="previewPublish">Preview</button>
</div>
<!-- Preview, workflow and more actions button ends -->
<div class="draggable-block-section" fxFlex="100" fxLayout="column">
<!-- Left form fields panel starts -->
<div class="left-panel" fxFlex="50">
<app-draggable [config]="fields"></app-draggable>
</div>
<!-- Left form fields panel ends -->
<!-- Right panel starts -->
<div class="right-panel" fxFlex="50">
<app-blocks [config]="schema"></app-blocks>
</div>
<!-- Right panel ends -->
</div>
Question: How can I successfully redirect to the horizontal view in the 'Preview-Publish' section upon clicking the 'Preview button' in the HTML file above? Any assistance would be greatly appreciated as the current click functionality does not seem to work. The goal is for the 'horizontal' view to automatically display when navigating to 'publish-preview'.