How to use portofino - 6 common examples

}

}

@Component({
  selector: 'custom-navigation',
  template: `<h3>Custom navigation</h3><p><a>Start here</a> </p>`
})
export class CustomNavigation {}

@Component({
  selector: 'portofino-welcome',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
@PortofinoComponent({ name: 'welcome' })
export class WelcomeComponent extends Page implements OnInit {
  projects = [];
  ngOnInit(): void {
    this.http.get(`${this.portofino.apiRoot}projects?maxResults=20`).subscribe(
      res =&gt; this.projects = res.records
    );
  }
}

@PortofinoComponent({ name: 'customcrud' })
export class CustomCrud extends CrudComponent {

  initialize(): void {
    console.log("Custom crud");
    super.initialize();
    this.configuration.title = 'Custom CRUD';

@Component({
  selector: 'portofino-welcome',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
@PortofinoComponent({ name: 'welcome' })
export class WelcomeComponent extends Page implements OnInit {
  projects = [];
  ngOnInit(): void {
    this.http.get(`${this.portofino.apiRoot}projects?maxResults=20`).subscribe(
      res => this.projects = res.records
    );
  }
}

@PortofinoComponent({ name: 'customcrud' })
export class CustomCrud extends CrudComponent {

  initialize(): void {
    console.log("Custom crud");
    super.initialize();
    this.configuration.title = 'Custom CRUD';
    this.searchComponent = CustomSearch;
    this.searchComponentContext = { customInput: "works!" };
  }

  @Button({
    list: 'search-results', text: 'Custom button', icon: 'save', color: "warn", enabledIf: CustomCrud.buttonEnabled
  })
  hello() {
    console.log("Custom button", this.configuration);
  }

);
  }
}

@PortofinoComponent({ name: 'customcrud' })
export class CustomCrud extends CrudComponent {

  initialize(): void {
    console.log("Custom crud");
    super.initialize();
    this.configuration.title = 'Custom CRUD';
    this.searchComponent = CustomSearch;
    this.searchComponentContext = { customInput: "works!" };
  }

  @Button({
    list: 'search-results', text: 'Custom button', icon: 'save', color: "warn", enabledIf: CustomCrud.buttonEnabled
  })
  hello() {
    console.log("Custom button", this.configuration);
  }

  static buttonEnabled() {
    return true;
  }
}

export class CustomSearch extends SearchComponent {
  @Input()
  customInput;
  ngOnInit(): void {
    console.log("Custom search with input", this.customInput);

<p>Welcome to Portofino 5. This is your new empty application.</p>
        <p>
          Use the navigation button
          <button type="button" title="{{ 'Navigation' | translate }}">
            menu
          </button>
          to explore the pages.
        </p>
        <p>Initially, the application has the user admin/admin built in. You can use that to run the wizard, connect to your database, and build a complete application from it.</p>
        <p>The wizard can be found "upstairs", where all the configuration tools lie. The "upstairs" section is optional and can be removed or disabled in production.</p>
      
    `
})
@PortofinoComponent({ name: 'welcome' })
export class WelcomeComponent extends Page {}

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  providers: [],
  imports: [
    PortofinoModule.withRoutes([]), PortofinoUpstairsModule,
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule, HttpClientModule, ReactiveFormsModule,
    MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule,
    MatIconModule, MatInputModule, MatMenuModule, MatPaginatorModule, MatRadioModule, MatSelectModule, MatSidenavModule,
    MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule, MatMomentDateModule,
    FileInputAccessorModule, QuillModule.forRoot(), TranslateModule.forRoot()],
  entryComponents: [WelcomeComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

@Component({
  selector: 'app-root',
  template: `
    
  `
})
export class DemoTTAppComponent {}

@NgModule({
  declarations: [DemoTTAppComponent, HelloPortofino, CustomNavigation, WelcomeComponent, CustomCrud, CustomSearch],
  providers: [
    { provide: NAVIGATION_COMPONENT, useFactory: DemoTTAppModule.navigation },
  ],
  imports: [
    PortofinoModule.withRoutes([{ path: "hello", component: HelloPortofino }]), PortofinoUpstairsModule,
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule, HttpClientModule, ReactiveFormsModule,
    MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule,
    MatDividerModule, MatExpansionModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule,
    MatPaginatorModule, MatProgressBarModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSnackBarModule,
    MatSortModule, MatTableModule, MatTreeModule, MatToolbarModule, MatMomentDateModule, ScrollingModule,
    FileInputAccessorModule, NgxdModule, QuillModule.forRoot(),
    TranslateModule.forRoot()],
  entryComponents: [ CustomNavigation, WelcomeComponent, CustomCrud, CustomSearch ],
  bootstrap: [DemoTTAppComponent]
})
export class DemoTTAppModule {
  static navigation() {
    return DefaultNavigationComponent
    //return CustomNavigation
  }
}

to explore the pages.
        <p></p>
        <p>Initially, the application has the user admin/admin built in. You can use that to run the wizard, connect to your database, and build a complete application from it.</p>
        <p>The wizard can be found "upstairs", where all the configuration tools lie. The "upstairs" section is optional and can be removed or disabled in production.</p>
      
    `
})
@PortofinoComponent({ name: 'welcome' })
export class WelcomeComponent extends Page {}

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  providers: [],
  imports: [
    PortofinoModule.withRoutes([]), PortofinoUpstairsModule,
    BrowserModule, BrowserAnimationsModule, FlexLayoutModule, FormsModule, HttpClientModule, ReactiveFormsModule,
    MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatDialogModule, MatFormFieldModule,
    MatIconModule, MatInputModule, MatMenuModule, MatPaginatorModule, MatRadioModule, MatSelectModule, MatSidenavModule,
    MatSnackBarModule, MatSortModule, MatTableModule, MatToolbarModule, MatMomentDateModule,
    FileInputAccessorModule, QuillModule.forRoot(), TranslateModule.forRoot()],
  entryComponents: [WelcomeComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}