Activities of "TimMackey"

Your solution worked. Thank you!

main-routing.module.ts

... // (additional imports)
import { NgModule } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap';

@NgModule({
    imports: [
        CollapseModule.forRoot(),
...

dashboard.component.html

...
    <button type="button" class="btn btn-primary"
            (click)="collapse.show()">Show content
    </button>
    <button type="button" class="btn btn-primary"
            (click)="collapse.hide()">Hide content
    </button>
    <hr>
    <div #collapse="bs-collapse" [collapse]="isOpen"
         class="card card-block card-header">
      <div class="well well-lg">Some content</div>
    </div>
...

dashboard.component.ts

import { Component, AfterViewInit, Injector, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap';
...
export class TtmDashboardComponent extends AppComponentBase implements AfterViewInit {
...
    isOpen = false;

ASP.NET Zero version 5.3.0

Browser:

> console.log($().collapse);

 function _jQueryInterface(config) {
      return this.each(function () {
        var $this = $$$1(this);
        var data = $this.data(DATA_KEY);

        var _config = _extends({}, Default, $this.data(), typeof config === 'object' && config);

        if (!data && _config.toggle && /show|hide/.test(config)) {
          _config.toggle = false;
        }

        if (!data) {
          data = new Collapse(this, _config);
          $this.data(DATA_KEY, data);
        }

        if (typeof config === 'string') {
          if (typeof data[config] === 'undefined') {
            throw new TypeError("No method named \"" + config + "\"");
          }

          data[config]();
        }
      });
    }
eval code (33435) (1,1)

< undefined
>

... and following the eval code link:

Failed to open eval code (33435)

I attempted to implement the "Manual toggle" example at.. [https://ngx-bootstrap-latest.surge.sh/#/collapse#manual-toggle])

Chrome and Edge browses report: ERROR Error: Uncaught (in promise): Error: Template parse errors: There is no directive with "exportAs" set to "bs-collapse" (" </button> <hr> <div [ERROR ->]#collapse="bs-collapse" [collapse]="isOpen" class="card card-block card-header"> "): ng:///MainModule/TtmDashboardComponent.html@167:21 Can't bind to 'collapse' since it isn't a known property of 'div'. ...

I do have a collapsible panel working with 'data-toggle="collapse"' in html, so I think the means Bootstrap is loaded - yes? When I place

console.log($().collapse);

in 'ngOnInit()' in my component, the browser console message is

undefined

... which would suggest Bootstrap is not loaded?

I'm trying to create a collection of panels that can be expanded or collapsed individually, or with a parent button to expand/collapse all child panels. I do not want an accordion, where opening one panel closes all others. I've been successful in getting multiple panels to expand/collapse independent of their neighbors, but not as a group.

There are lots of examples of how to do this, but they all require jQuery. I've discovered several jQuery methods don't exist or don't work in Boilerplate, like this one:

$(this).closest('.collapse-group').find('.collapse').collapse('hide');

...which results in an error in the browser console:

TypeError: Object doesn't support property or method 'collapse'

I have been unable to get this example to work on the dashboard page: [https://codepen.io/martinkrulltott/pen/mejmmj]) probably due to the jQuery code not being invoked.

I've spent a couple of whole days trying to enable what should be a simple task, without success. Can you offer any assistance?

The most recent Metronic package I could find was metronic-v4.7.5.zip from June 2017. I there a more recent update?

When IPersonAppService interface is added, like this....

public class PersonAppService : PhoneBookDemoAppServiceBase, IPersonAppService

Tests Should_Get_All_People_Without_Any_Filter() and Should_Get_People_With_Filter() fail. When IPersonAppService is removed, the Tests pass. Also of note, the TenantId column in PbPersons and PbPhone is never set to 1. I also deleted and recreated the database to see if that would fix the problem. The Seed does create two new records on Host startup, but the TenantId is 0.

public partial class Implemented_IMustHaveTenant_For_Person : Migration
    {
        protected override void Up(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.AddColumn<int>(
                name: "TenantId",
                table: "PbPersons",
                nullable: false,
                defaultValue: 1);
        }
        ...
    }

MultiTenancyEnabled state makes no difference.

public class PhoneBookDemoConsts
    {
        public const bool MultiTenancyEnabled = true;
        ...
    }

In the section "Database Migrations", when creating file InitialPeopleCreator.cs the code is

namespace Acme.PhoneBookDemo.Migrations.Seed.Host
{
    public class InitialPeopleCreator
    {
        private readonly PhoneBookDemoDbContext _context;

        public InitialPeopleCreator(PhoneBookDemoDbContext context)
        {
            _context = context;
        }

        public void Create()
        {
            var douglas = _context.Persons.FirstOrDefault(p => p.EmailAddress == "[email protected]");
            if (douglas == null)
            {
                ...
            }
        }
    }
}

Later in the "Adding Database Migration" section the file 'InitialPeopleCreator.cs' is renamed 'InitialPeopleAndPhoneCreator.cs'. The code

var douglas = _context.Persons.FirstOrDefault(p => p.EmailAddress == "[email protected]");

introduces an error which is causing duplicate records for douglas.adams to be added to the database.

"[email protected]"

should be

"[email protected]")

Your posted solution works. Thank you for updating the instructions document.

Until the aspnet-zero-samples/PhoneBook-Angular project on github is updated and tested, those files are basically useless as a reference when problems arise.