Display MS Office like word or excel in html using Angular

Hi. I recently was looking for a solution on how to perform this task in Angular. And I found a great answer on a stack overflow, but I decided to post a blog post so I do not forget about it.

In general the solution uses either the Google App Viewer or the Office Viewer.

For Google Apps Viewer you use an url like:

<iframe src="http://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

For Office 365 Viewer you use an url like:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

For some information on Office 365 integration take a look  at https://wopi.readthedocs.io/en/latest/overview.html