Skip to content

Instantly share code, notes, and snippets.

@IMM9O

IMM9O/ng-custom-element-index.html

Last active March 10, 2019 02:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save IMM9O/6f9e848019eccd744499a42f29e3a6e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save IMM9O/6f9e848019eccd744499a42f29e3a6e8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ng-custom-element-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<title>Custom Element</title>
</head>
<body>
<facebook-card
title="Custom Element"
name="Donna Marshall"
caption="Lorem ipsum dolor sit, amet consectetur adipisicing elit."
avtar="https://uinames.com/api/photos/female/15.jpg"
image="https://images.pexels.com/photos/169193/pexels-photo-169193.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"
>
<!-- Using Content Projection in angular are like slots in web component stander -->
<i icon-like class="fa fa-thumbs-o-up like-icon"></i>
<i icon-comment class="fa fa-comment-o"></i>
<i icon-share class="fa fa-share"></i>
</facebook-card>
<script>
/**
* Here you can interact with custome element using pure javascript
* You can Listen to built-in events as well as custome events
*/
const el = document.querySelector('facebook-card');
el.addEventListener('likeNotify', e => {
console.log('Like Cliked');
});
el.addEventListener('shareNotify', e => {
console.log('Share Cliked');
});
el.addEventListener('commentNotify', e => {
console.log('Comment Cliked');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment