Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

plotly-plot template enhancements #147

Merged
merged 2 commits into from
Feb 1, 2021
Merged

Conversation

alyst
Copy link
Contributor

@alyst alyst commented Jan 31, 2021

  • use [ngClass] to manipulate the div classes. It's more compatible with the rest of Angular and doesn't overwrite classes set by e.g. directives.
  • add <ng-content></ng-content>, so that it's possible for the user to insert elements into plotly's div:
<plotly-plot>
  <div>user code</div>
</plotly-plot>

E.g. I'm using it to add loading overlay over the plot.

*ngClass* better integrates with the rest of Angular and, unlike "className", doesn't overwrite the classes set by Angular core or other directives.
...inside outer *<div>* so that it's possible for the user to insert some templates within div
@andrefarzat
Copy link
Collaborator

Hello, @alyst . Thank you for you contribution 😸
The ngClass I am totally fine, but I can't see a use case for the <ng-content>. When would it be necessary to add code inside the <plotly-plot> element?

@alyst
Copy link
Contributor Author

alyst commented Feb 1, 2021

When would it be necessary to add code inside the element?

E.g. I'am using it to implement overlay divs that mask the plot and show the spinner while there is no data or loading takes some time.
Adding such divs after the plot component is not so nice, because it's hard to make them matching the dimensions of the plot.

@andrefarzat
Copy link
Collaborator

@alyst I see and makes sense to me. I will accept this PR, but may I ask you a favor?
You create another PR with the docs for these changes? 😸

@andrefarzat andrefarzat merged commit 2e65dc3 into plotly:master Feb 1, 2021
alyst added a commit to alyst/angular-plotly.js that referenced this pull request Feb 1, 2021
alyst added a commit to alyst/angular-plotly.js that referenced this pull request Feb 1, 2021
@alyst alyst mentioned this pull request Feb 1, 2021
andrefarzat pushed a commit that referenced this pull request Feb 1, 2021
andrefarzat pushed a commit that referenced this pull request Feb 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants