Unable to create a close button using CSS in Angular

Question

Please check the following code:

https://stackblitz.com/edit/angular-nuyfcq

I want that on selecting a file, a small thumbnail shows up and has a Xsign. I have got it working using only HTML, CSS and JS (see https://codepen.io/manuchadha/pen/PBKYBJ) but I am unable to make it work in Angular.

Where is my mistake?

I agree but I am unable to find out what is the mistake in the Angular version — Manu Chadha, Aug 03 '18 at 15:29
I agree. `closeButtonLink.classList.add("close-cross-link");` doesn't seem to work. Though if you inspect the elements, `close-cross-link` is added (`` but I don't see `:before` and `:after`. Is it not possible to apply css? — Manu Chadha, Aug 03 '18 at 15:35
Do you mean the commented code below `
`? I am adding the `img` and `a` using typescript code in `_handleReaderLoaded`. — Manu Chadha, Aug 03 '18 at 15:46
I found this which might be the issue but I my attempts to try `:host` and `::ng-deep` are not working. https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling — Manu Chadha, Aug 03 '18 at 15:47
Angular does allow dynamic DOM manipulation though using ElementRef etc. I am not using that but I wonder why what I am doing is not working? — Manu Chadha, Aug 03 '18 at 15:48

score 0 · Answer 1 · answered Aug 03 '18 at 19:10

Inspired by the answer https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling, it worked If I change all of my classes to the format :host >>> selector i.e. (the commented part was what I was using earlier. I changed from class (eg close-cross-link to selector by giving an id to a (a#close-button)

:host >>>  a#close-button /*.close-cross-link*/ {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  opacity: 0.3;
  background-color:white;
  position:relative;
  top:-15px;
  left:-15px;
  /*border-radius:50%; /*makes a circle*/
}
:host >>>  a#close-button:hover /*.close-cross-link:hover */{
  opacity: 1;
}
:host >>>  a#close-button:before, :host >>>  a#close-button:after /*.close-cross-link:before, .close-cross-link:after*/ {
  display:inline-block;/*need display+relative+left or absolute+left*/
  position:relative;
  left: 13px;
  border: 1px solid black;
  top:0px;
  right:0px;
  content: '';
  height: 31px;
  width: 2px;
  background-color: #333;
  border-radius:50%; /*makes cross sharper*/
}
:host >>>  a#close-button:before /*.close-cross-link:before */{
  transform: rotate(45deg);
}
:host >>>  a#close-button:after /*.close-cross-link:after*/ {
  transform: rotate(-45deg);
}

Unable to create a close button using CSS in Angular

1 Answers1