Not able to customize Content anymore in RC0

[dgroh]

Short description of the problem:

In Beta11 I was able to control the Content, i.e addCssClass method. Now this method is not there anymore. The resize method is also not working anymore.

Which Ionic Version? 2 RC0

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 OS: Node Version: v4.6.0

[ghenry22]

resize method is working for me on content on RC0, just following the basic examples in the ionic docs for it.

[manucorporat]

Use setElementClass() instead of addCssClass. And resize() is working to me.

[dgroh]

Are you sure setElementClass() works @manucorporat ?

Error in ./HeaderContentComponent class HeaderContentComponent - inline template:10:27 caused by: Cannot read property 'setElementClass' of undefined ErrorHandler.handleError @ error_handler.js:47 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:49 ORIGINAL EXCEPTION: Cannot read property 'setElementClass' of undefined ErrorHandler.handleError @ error_handler.js:49 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:52 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:52 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:53 TypeError: Cannot read property 'setElementClass' of undefined at HeaderContentComponent.toggleToolbar (checkin-checkout-storage.js:58) at _View_HeaderContentComponent0._handle_click_11_0 (HeaderContentComponent.ngfactory.js:349) at view.js:403 at dom_renderer.js:249 at dom_events.js:26 at t.invoke (polyfills.js:3) at Object.onInvoke (ng_zone_impl.js:43) at t.invoke (polyfills.js:3) at e.runGuarded (polyfills.js:3) at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:72)

Why should my Content be undefined? It worked (same code) in Beta 11.

[manucorporat]

Can you share the code you are using?

[dgroh]

import { Component, Input } from "@angular/core";
import { Content } from "ionic-angular";

@Component({
    selector: "header-content-component",
    templateUrl: "header-content.html"
})
export class HeaderContentComponent {
    @Input("title") public title: string;
    @Input("content") public content: Content;
    public toolbarActive: boolean;

    public toggleToolbar() {
        this.toolbarActive = !this.toolbarActive;

        if (this.toolbarActive) {
            // Remove scroll from content

        } else {
            // Add scroll to content
        }

        this.content.resize();
    }
}

Here is how we use this:

<ion-header class="{{subject}}" no-shadow>
    <header-content-component [title]="subject" [content]="content"></header-content-component>
</ion-header>

Here is where we get Content from (it is a base class of our pages):

import { ViewChild } from "@angular/core";
import { NavController, NavParams, Content } from "ionic-angular";
import { BackendService } from "../backend/backend.service";
import { Navigation } from "../backend/navigation";
import { Transition } from "../backend/transition";
import { Condition } from "../backend/condition";

export abstract class PageBase<T> {
    constructor(protected nav: NavController, protected params: NavParams, protected backendService: BackendService) {
    }

    @ViewChild(Content) public content: Content;
    protected models: Array<T> = [];
    protected subject: string;
    protected type: string;
    protected title: string;
    protected breadcrumb: string;
    protected description: string;

    protected loadNavigation(target: string): void {
        this.backendService.getNavigation(target).subscribe((navigation: Navigation) => {
            this.subject = navigation.subject;
            this.type = navigation.type;
            this.title = navigation.title;
            this.breadcrumb = navigation.breadcrumb;
            this.description = navigation.description;
        }, err => {
            console.log(err); // TODO: Proper error handling
        });
    }

    protected loadTransitions(target, onDone: Function) {
        this.backendService.getTransitions(target).subscribe((transitions: Array<Transition>) => {
            transitions.forEach(transition => {
                if (transition.conditions) {
                    transition.conditions.forEach((condition: Condition) => onDone(condition));
                }
            });
        }, err => {
            console.log(err); // TODO: Proper error handling
        });
    }
}

No matter what, it now says that Content is undefined

As I said. It is exactly the same code from Beta 11. Except that the method to add and remove css class is gone.

[dgroh]

Hello @manucorporat I created a repo to help Ionic team to identify the issue: https://github.com/dgroh/RepoDemoForIssues

Please let me know if you have further questions.

[manucorporat]

@dgroh angular 2 decorators must be used in the class with the @Component @Directive decorator. You can't use @ViewChild is a base class. It has not effect.

[dgroh]

That is really bad, but then this has nothing to do with Ionic. It's an Angular problem, which was not ocurring in Angular RC4.

I have to reference always the same @ViewChild for all classes. I'll report this to Angular2

[manucorporat]

@dgroh I am sure they are aware of this: https://github.com/angular/angular/issues/5415 https://github.com/angular/angular/issues/10461 https://github.com/angular/angular/issues/11606 // << tracking progress

hehe

[dgroh]

Wow, cheers, I was right now there looking for open issues. I'll read more there, thanks @manucorporat