### File

`projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts`

### Implements

`OnChanges`

### Metadata

selector | `ab-wordpress-post`

template

    <div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">

        <h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>

        <div [ngSwitch]="post.type">

            <ng-container *ngSwitchDefault>
                <div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
            </ng-container>

            <ng-container *ngSwitchCase="'iframe'">
                <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
            </ng-container>
            <ng-container *ngSwitchCase="'app'">
                <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                <script>
                    var app_server_app_data = {{ post.json | json }}
                </script>
            </ng-container>

        </div>

    </div>

### Index

###### Properties

- Public postData
- Public trustedContent
- Public trustedTitle
- Public trustedUrl

###### Methods

- ngOnChanges
- parse

###### Inputs

- options
- post

### Constructor

`constructor(_sanitizer: DomSanitizer)`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:38

Parameters :

Name | Type | Optional
_sanitizer | `DomSanitizer` | no

### Inputs

`options` | Type: `any` Default value: `{title: true}`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:33

`post` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:34

### Methods

ngOnChanges
`ngOnChanges(changes: )`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:73

Parameters :

Name | Optional
changes | no

Returns : `void`

parse
`parse(post: )`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:42

Parameters :

Name | Optional
post | no

Returns : `void`

### Properties

Public postData
`postData: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:38

Public trustedContent
`trustedContent: `SafeHtml``
Type : `SafeHtml`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:36

Public trustedTitle
`trustedTitle: `SafeHtml``
Type : `SafeHtml`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:35

Public trustedUrl
`trustedUrl: `SafeResourceUrl``
Type : `SafeResourceUrl`
Defined in projects/app-base-library/src/lib/angular/modules/wordpress/wordpress-post.component.ts:37

    import { Component, Input, OnChanges } from '@angular/core';
    import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';

    @Component({
        selector: 'ab-wordpress-post',
        template: `
        <div *ngIf="post" class="post post-type-{{ post.type }} clearfix" post="post" id="post-{{ post.id }}">

            <h3 *ngIf="trustedTitle" class="title" [innerHTML]="trustedTitle"></h3>

            <div [ngSwitch]="post.type">

                <ng-container *ngSwitchDefault>
                    <div *ngIf="trustedContent" [innerHTML]="trustedContent" class="content"></div>
                </ng-container>

                <ng-container *ngSwitchCase="'iframe'">
                    <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                </ng-container>
                <ng-container *ngSwitchCase="'app'">
                    <iframe [src]="trustedUrl" width="{{ post.width }}" height="{{ post.height }}"  frameborder="0" style="visibility:hidden;" onload="this.style.visibility='visible';" allowtransparency=”true”></iframe>
                    <script>
                        var app_server_app_data = {{ post.json | json }}
                    </script>
                </ng-container>

            </div>

        </div>
        `
    })
    export class WordpressPostComponent implements OnChanges {
        @Input() options: any = {title: true};
        @Input() post: any;
        public trustedTitle: SafeHtml;
        public trustedContent: SafeHtml;
        public trustedUrl: SafeResourceUrl;
        public postData: any;

        constructor(private _sanitizer: DomSanitizer) { }

        parse(post) {
            if (post.title) {
               this.trustedTitle = this._sanitizer.bypassSecurityTrustHtml(post.title.rendered);
            }
            if (post.content) {
                this.trustedContent = this._sanitizer.bypassSecurityTrustHtml(post.content.rendered);
            }
            if (post.url) {
                this.trustedUrl = this._sanitizer.bypassSecurityTrustResourceUrl(post.url);
            }
            switch (post.type) {
                case 'app':
                    this.postData = JSON.parse(post.json);
                    break;
                case 'iframe':
                    // code block
                    break;
                default:
                // code block
            }
        }

        // trustAsHtml(content) {
        //     console.log('trustAsHtml');
        //     return this._sanitizer.bypassSecurityTrustHtml(content);
        // };
        // trustAsUrl(url) {
        //     console.log('trustAsUrl',url);
        //     return this._sanitizer.bypassSecurityTrustResourceUrl(url);
        // };

        ngOnChanges(changes) {
            if (!this.post) {
                return;
            }
            this.parse(this.post);
        }

    }

Legend
Html element
Component
Html element with directive
' var COMPONENTS = [{'name': 'AboutComponent', 'selector': 'sk-about'},{'name': 'DevStackComponent', 'selector': 'sk-dev-stack'},{'name': 'DrupalMenuComponent', 'selector': 'ab-drupal-menu'},{'name': 'IndexComponent', 'selector': 'sk-index'},{'name': 'LoginButtonComponent', 'selector': 'ab-login-button'},{'name': 'LoginComponent', 'selector': 'ab-login'},{'name': 'LoginFormComponent', 'selector': 'ab-login-form'},{'name': 'LoginModalComponent', 'selector': 'app-login-modal'},{'name': 'ModalContentComponent', 'selector': 'app-modal-content'},{'name': 'NodeComponent', 'selector': 'ab-drupal-entity-node'},{'name': 'NodeEditorComponent', 'selector': 'ab-drupal-entity-node-editor'},{'name': 'RouterBreadcrumbComponent', 'selector': 'ab-router-breadcrumb'},{'name': 'RouterMenuComponent', 'selector': 'ab-router-menu'},{'name': 'SpinnerComponent', 'selector': 'ab-spinner'},{'name': 'SplashComponent', 'selector': 'sk-splash'},{'name': 'SvgTemplateComponent', 'selector': 'svg-template'},{'name': 'UserComponent', 'selector': 'ab-user'},{'name': 'WordpressMenuComponent', 'selector': 'ab-wordpress-menu'},{'name': 'WordpressPostComponent', 'selector': 'ab-wordpress-post'}]; var DIRECTIVES = [{'name': 'EmailValidatorDirective', 'selector': '[validateEmail][ngModel],[validateEmail][formControlName],[validateEmail][formControl]'},{'name': 'SampleDirective', 'selector': '[sampleDirective]'}]; var ACTUAL_COMPONENT = {'name': 'WordpressPostComponent'};

# results matching ""

# No results matching ""