How to hide Angular component inside AngularJS code

  angular, angularjs, javascript

I have MyTableComponent Angular component rendered from AngularJS code:

// AngularJS code
// src/template/expanded-table.html
   ...
   <div class="table-view-port">
      <my-table ng-show="false" [model]="tableModel"
                                [dataSource]="data">
      </my-table>
   </div>
   ...

In Angular MyTableComponent I have:

// Angular code
// shared/components/table/table.component.ts

...
export class MyTableComponent<T> implements OnInit {
    ...
    ngOnInit() {
        console.log('Table component');
    }
    ...

All I need to do is not render my-table at all. I try to do it by using ng-show="false", but it doesn’t work. I tried *ngIf="false" either, but had the same result.

My downgrade module if it can affect somehow:

// appModule/app.module.downgrade.ts 

const APP_MODULE_DOWNGRADABLES: Mapper[] = [
    ...
    {
        downgradeAs: 'directive',
        entity: {
            component: MyTableComponent
        },
        targetName: 'myTable'
    },
    ...

Source: Ask Javascript Questions

LEAVE A COMMENT