Angular6 hiding component selector

It's sometimes useful to have angular's component selector not to be rendered in the page, as sometimes this can cause problems with CSS rendering (since we will have an intermediate tag in between 2 tags)

For example :


@Component({
    selector: 'my-component'
})
export class MyComponent{

@Input()
title:String;


}
...

Now you will use your component for example like so :


<html>
.....

<div class='container'>
<my-component [title]="'Test'" ></my-component>

</div>
.....

</html>

With this approach in the rendered HTML you will have the angular component tab generated inside the div but what if this causes problems with some CSS code ?

Well luckily enough there's a simple way to change this and that is changer your selector from a tag to an attribute


@Component({
    selector: '[my-component]'
})
export class MyComponent{

@Input()
title:String;


}
...

By changing the value of the selector property from my-component to [my-component] you should be able to "apply" your component directly to a standard HTML tag, so this will prevent the <my-component> tag to be rendered in the final HTML


<html>
.....
<div class='container' [title]="'Test'" my-component >


</div>
.....

</html>

OSX paste unformatted text / remove text formatting

So recently I found about what is for me one of the best keyboard shortcuts on OSX often I copy text from somewhere and whenever I paste it it comes with all the original formatting, which TBH mostly of the time is a pain (at least for me) even though a lot of applications have a "paste special" or something like that is a bit cumbersome to me

So the following keyboard shortcut allows you to paste unformatted text in almost any application :

This for me is a great productivity shortcut and one of the best ones I found for OSX

Angular 4/5 override class in body tag (Shadow Piercing combinators approach)

In angular component CSS styles are encapsulated into the component's view and don't affect the rest of the application; usually this is the behaviour that you want however sometimes it's useful to be able to affect tags outside the component, for example the body tag

This can be achieved in a few different ways, like for example tweaking view encapsulation parameters

In this post I will show you a CSS approach to this using The Shadow Piercing combinators, starting in Angular 4.3.0 you can use the custom shadow piercing combinator ::ng-deep to achieve this

For example if we had a component named "CustomComponent" we could have a set of files similar to :

  • custom.component.ts
  • custom.component.css
  • custom.component.html

In order for us to shadow and override the main body tag would be to put the following in the custom.component.css :

::ng-deep body {
  min-height: 75rem;
  padding-top: 4.5rem;
}

BigDecimal rounding to the nearest 5 cents with Java's BigDecimal

Recently I hat to implement a function that would round to the nearest 5 cents and after googling around a bit I found bits and pieces here and there but none just worked for me, so below you can find a function that should do just that

/**
     * Rounds a decimal number to the nearest 5 cents using the following rules
     * 
     * Rounding rules :
     * - 0.1299 = 0.10
     * - 0.1300 = 0.15
     * - 0.1799 = 0.15
     * - 0.1800 = 0.20
     *
     * @param value the BigDecimal value to round
     * @return the rounded value for the big decimal with a scale of 2
     */
    public static BigDecimal roundToNearest5Cents(final BigDecimal value) {
        return value.setScale(2, RoundingMode.FLOOR).multiply(new BigDecimal(20)).add(new BigDecimal("0.5"))
                .setScale(0, RoundingMode.FLOOR).divide(new BigDecimal(20)).setScale(2, RoundingMode.FLOOR);
    }

Spring application events lifecycle and earlyApplicationEvents

Not long ago I learned the hard way the way spring handles earlyApplication events when we started having problems in one of our projects

Basically we were using a MongoDB database as a cache layer, so when the application would startup we would pull most of the data from our RDBMS do some processing and denormalisation then fill the MongoDB with data

The application had been running mostly fine for some time but we saw some memory issues as the data kept growing within the application and I suspected a Memory leak issue

So I decided to do a java heap dump to try to see what was happening, and I found the culprit; way down the piping of spring the org.springframework.context.support.AbstractApplicationContext class had a private property earlyApplicationEvents that was keeping references to more than 3 million instances of BasicDBObject that were not Garbage collected even though they were no longer in scope and were already written to the database

After scouring the internet a fellow developer pointed out to me that the property : earlyApplicationEvents is :

basically holds onto events during startup until the listeners can be registered, at which point it will get set to null

So with this information I could simple push my heavy duty task later on the spring application events lifecycle by using spring's handy application events mechanism.

For those who don't know what application events are; application events are available since the very beginning of the Spring framework as a mean for loosely coupled components to exchange information; the main application events are :

  1. ContextRefreshedEvent : published when the ApplicationContext is either initialized or refreshed
  2. ContextStartedEvent : when the ApplicationContext is started using the start() method on the ConfigurableApplicationContext interface. You can poll your database or you can restart any stopped application after receiving this event
  3. ContextStoppedEvent : published when the ApplicationContext is stopped using the stop() method on the ConfigurableApplicationContext interface. You can do required housekeep work after receiving this event.
  4. ContextClosedEvent : published when the ApplicationContext is closed using the close() method on the ConfigurableApplicationContext interface. A closed context reaches its end of life; it cannot be refreshed or restarted.

in my case after the context has been refreshed like so :


@Configuration
public class MyConfigClass implements ApplicationListener<ContextRefreshedEvent>{


    //Misc code
    
    private final InitializationService initializationService;

    
    @Autowired
    public MyConfigClass(InitializationService initializationService){
       this. initializationService = initializationService;
    }

 @Override
    public void onApplicationEvent(ContextRefreshedEvent event) {
        initializationService.init();
    }
}

So if I can leave you with a parting "word of wisdom" : Be careful WHEN you are running certain operations in respect to the Spring Application events lifecycle and the possible side-effects that this can cause

for more info on application events please read the spring official documentation

Working with stateless session in hibernate and jpa

When doing heavy read-only operations in with the database it can be a good idea to take advantage of using Hibernate's Stateless Session

As it name indicates this session does not keep state of the entities that it retrieves from the database and so it bypasses the L1 and L2 cache

This can have significant performance impact on heavy DBA read operations (since the state of the entities is not bet tracked)



@Component
@Scope("prototype")
public class SomeJpaService {

public static final int SCROLL_STEP = 1000;

     @PersistenceContext
     private EntityManager entityManager;


    
     public void doInStatelessSession(){

       LOGGER.info("ABOUT to perform Heavy read operation on DB");

       StatelessSession statelessSession = entityManager.unwrap(Session.class).getSessionFactory().openStatelessSession();

        try (ScrollableResults r = statelessSession
                .createQuery("SELECT c FROM Order c")
                .setReadOnly(true)
                .setCacheable(false)
                .scroll()) {// create the scrollable results with a try/close resources block

            while (r.scroll(SCROLL_STEP)) {
                 Order o = (Order) r.get(0);
                //perform some operation on object
              
            }
        }      



        LOGGER.info("FINISHED heavy read operation");

        statelessSession.close();
   }


}

There's however a few caveats with this approach :

  • Collections cannot be fetched on stateless sessions
  • Because of the stateless nature of the session this can only be used on read-only operations

Serving angular2 content from Spring Boot application

Recently I had to ship an Angular2/Angular4 application within a Spring boot WAR packaged application and I was having some issues when dealing with the the urls in the angular routes, since it goes through the DispatcherServlet I was getting 404 all over the place

There are a few ways to handle this, below is my preferred solution :


@Controller
public class Angular2ViewController {


    @RequestMapping({"/books", "/login", "/admin", "/logout", "/configure"})
    public String index() {
        return "forward:/index.html";
    }

}

There you go, as easy as that

The inconvenience about this solution is that you have to maintain a set of urls in your controller also

Angular6 hiding component selector

It's sometimes useful to have angular's component selector not to be rendered in the page, as sometimes this can cause problems with...