Angular 4 with haml-loader - ruby-on-rails

Question

I am trying to use haml with templates in my Rails 5.1 and Angular 4 project.
I have the haml template working but when I tried to implement Material 2 for Angular, it uses attributes that haml does not add to the DOM.
For example, I am trying to implement a sidenav and I created a component with the following template:
-#navbar.component.html.haml
%md-sidenav-container.example-container
%md-sidenav.example-sidenav{ '#sidenav' => true }
Jolly good!
.example-sidenav-content
%button{'md-button' => true, '(click)' => 'sidenav.open()'}
Button
And here is my component:
//navbar.component.ts
import { Component } from '#angular/core';
import navbar from './navbar.html.haml';
#Component({
selector: 'navbar',
template: navbar
})
export class NavbarComponent {}
'#sidvenav' attribute and 'md-button' attribute are not rendered to the DOM.
can I not use haml with Angular 4? should I not use haml with Angular 4? or am I just doing it wrong?
Under config/webpack/loaders I have a file called haml.js
module.exports = {
test: /\.html\.haml$/,
loader: 'haml-haml-loader'
}
And under javascript/app I have a file called haml.d.ts
declare module "*.haml" {
const content: string
export default content
}
This is what allows me to use template for haml. There are similar files for html and I render them as strings and they get compiled as needed by html-loader or haml-haml-loader.
Any help would be appreciated.