diff --git a/docs/extensions/components/preview-extension.component.md b/docs/extensions/components/preview-extension.component.md
index 3ba64711a4..4ec2778870 100644
--- a/docs/extensions/components/preview-extension.component.md
+++ b/docs/extensions/components/preview-extension.component.md
@@ -108,7 +108,7 @@ You can also use `*` wildcard to register a single component that opens all file
       "content": [
         {
           "id": "dev.tools.viewer.viewer",
-          "fileExtension": ["*"],
+          "fileExtension": "*",
           "component": "your-extension.main.component"
         }
       ]
diff --git a/lib/core/viewer/components/viewer.component.spec.ts b/lib/core/viewer/components/viewer.component.spec.ts
index 867f1d27db..85a793876b 100644
--- a/lib/core/viewer/components/viewer.component.spec.ts
+++ b/lib/core/viewer/components/viewer.component.spec.ts
@@ -183,7 +183,7 @@ describe('ViewerComponent', () => {
     });
 
     describe('Extension Type Test', () => {
-        it('should use external viewer via wildcard notation', async () => {
+        it('should display pdf external viewer via wildcard notation', async () => {
             const extension: ViewerExtensionRef = {
                 component: 'custom.component',
                 id: 'custom.component.id',
@@ -207,7 +207,7 @@ describe('ViewerComponent', () => {
             expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
         });
 
-        it('should use first external viewer provided', async () => {
+        it('should display pdf with the first external viewer provided', async () => {
             const extensions: ViewerExtensionRef[] = [
                 {
                     component: 'custom.component.1',
@@ -236,6 +236,56 @@ describe('ViewerComponent', () => {
             expect(element.querySelector('[data-automation-id="custom.component.2"]')).toBeNull();
         });
 
+        it('should display url with the external viewer provided', async () => {
+            const extension: ViewerExtensionRef = {
+                component: 'custom.component',
+                id: 'custom.component.id',
+                fileExtension: '*'
+            };
+            spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
+
+            fixture = TestBed.createComponent(ViewerComponent);
+            element = fixture.nativeElement;
+            component = fixture.componentInstance;
+
+            component.urlFile = 'http://localhost:4200/alfresco';
+            component.ngOnChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(component.externalExtensions.includes('*')).toBe(true);
+            expect(component.externalViewer).toBe(extension);
+            expect(component.viewerType).toBe('external');
+            expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
+        });
+
+        it('should use external viewer to display node by id', fakeAsync(() => {
+            const extension: ViewerExtensionRef = {
+                component: 'custom.component',
+                id: 'custom.component.id',
+                fileExtension: '*'
+            };
+            spyOn(extensionService, 'getViewerExtensions').and.returnValue([extension]);
+
+            fixture = TestBed.createComponent(ViewerComponent);
+            element = fixture.nativeElement;
+            component = fixture.componentInstance;
+
+            spyOn(component.nodesApi, 'getNode').and.callFake(() => Promise.resolve({ entry: {} }));
+
+            component.nodeId = '37f7f34d-4e64-4db6-bb3f-5c89f7844251';
+            component.ngOnChanges();
+
+            fixture.detectChanges();
+            tick(100);
+
+            expect(component.nodesApi.getNode).toHaveBeenCalled();
+            expect(component.viewerType).toBe('external');
+            expect(component.isLoading).toBeFalsy();
+            expect(element.querySelector('[data-automation-id="custom.component"]')).not.toBeNull();
+        }));
+
         it('should  extension file pdf  be loaded', (done) => {
             component.urlFile = 'fake-test-file.pdf';
             component.ngOnChanges();
diff --git a/lib/core/viewer/components/viewer.component.ts b/lib/core/viewer/components/viewer.component.ts
index 7a660dfeb7..c6185fc834 100644
--- a/lib/core/viewer/components/viewer.component.ts
+++ b/lib/core/viewer/components/viewer.component.ts
@@ -18,7 +18,7 @@
 import {
     Component, ContentChild, EventEmitter, HostListener, ElementRef,
     Input, OnChanges, Output, TemplateRef,
-    ViewEncapsulation, OnInit, OnDestroy
+    ViewEncapsulation, OnInit, OnDestroy, ChangeDetectorRef
 } from '@angular/core';
 import {
     SharedLinkEntry,
@@ -311,7 +311,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 private contentService: ContentService,
                 private uploadService: UploadService,
                 private el: ElementRef,
-                public dialog: MatDialog) {
+                public dialog: MatDialog,
+                private cdr: ChangeDetectorRef) {
         viewUtilService.maxRetries = this.maxRetries;
     }
 
@@ -413,6 +414,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
                 } else {
                     this.setUpNodeFile(node.entry).then(() => {
                         this.isLoading = false;
+                        this.cdr.detectChanges();
                     });
                 }
             },
@@ -447,7 +449,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.scrollTop();
     }
 
-    private async setUpNodeFile(nodeData: Node, versionData?: Version) {
+    private async setUpNodeFile(nodeData: Node, versionData?: Version): Promise<void> {
         this.readOnly = !this.contentService.hasAllowableOperations(nodeData, 'update');
 
         if (versionData && versionData.content) {
@@ -470,13 +472,11 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.fileName = versionData ? versionData.name : nodeData.name;
         this.viewerType = this.getViewerType(this.extension, this.mimeType);
 
-        let setupNode: Promise<void>;
-
         if (this.viewerType === 'unknown') {
             if (versionData) {
-                setupNode = this.viewUtilService.displayNodeRendition(nodeData.id, versionData.id);
+                await this.viewUtilService.displayNodeRendition(nodeData.id, versionData.id);
             } else {
-                setupNode = this.viewUtilService.displayNodeRendition(nodeData.id);
+                await this.viewUtilService.displayNodeRendition(nodeData.id);
             }
         }
 
@@ -484,8 +484,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         this.sidebarRightTemplateContext.node = nodeData;
         this.sidebarLeftTemplateContext.node = nodeData;
         this.scrollTop();
-
-        return setupNode;
     }
 
     private getViewerType(extension: string, mimeType: string): string {
diff --git a/lib/core/viewer/directives/viewer-extension.directive.spec.ts b/lib/core/viewer/directives/viewer-extension.directive.spec.ts
index ee900e88be..8a15607a7d 100644
--- a/lib/core/viewer/directives/viewer-extension.directive.spec.ts
+++ b/lib/core/viewer/directives/viewer-extension.directive.spec.ts
@@ -17,7 +17,7 @@
 
 import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
-import { ElementRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { ViewerComponent } from '../components/viewer.component';
 import { ViewerExtensionDirective } from './viewer-extension.directive';
@@ -43,7 +43,8 @@ describe('ExtensionViewerDirective', () => {
             { provide: Location, useClass: SpyLocation },
             ViewerExtensionDirective,
             {provide: ElementRef, useClass: MockElementRef},
-            ViewerComponent
+            ViewerComponent,
+            { provide: ChangeDetectorRef, useValue: { detectChanges: () => {} } }
         ]
     });